Bootstrap-Table跳转到指定页

最新推荐文章于 2024-10-28 11:53:56 发布

HerryDong

最新推荐文章于 2024-10-28 11:53:56 发布

阅读量5.3k

点赞数 2

文章标签： bootstrap bootstrap-table

本文链接：https://blog.csdn.net/HerryDong/article/details/105365973

版权

Bootstrap-Table本身不带跳转页的功能，所幸在网上找到了bootstrap-table-pagejump这个插件，依靠这个插件可以轻松实现跳转功能，如下图所示：
在这里插入图片描述

bootstrap-table-pagejump下载

链接：https://pan.baidu.com/s/1iFS2ak3KiWPO1zzKgxp2Rw

提取码：e1ek

前端代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <title>Bootstrap Table</title>
    <!-- bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>

    <!-- bootstrap-table -->
    <link href="lib/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <script src="lib/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="lib/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

    <!-- bootstrap-table-pagejump -->
    <link href="lib/bootstrap-table-pagejump/bootstrap-table-pagejump.css" rel="stylesheet" />
    <script src="lib/bootstrap-table-pagejump/bootstrap-table-pagejump.js"></script>
</head>
<body>
    <div style="margin-left:100px;margin-top:100px;width:1200px;">
        <table id="table"></table>
    </div>

    <script>
        $('#table').bootstrapTable({
            url: "ashx/LoadDataHandler.ashx",                      // URL
            method: "post",                                        // 请求类型
            contentType: "application/x-www-form-urlencoded",      // post请求必须要有，否则后台接受不到参数
            sidePagination: "server",                              // 设置在服务端还是客户端分页
            showRefresh: false,                                    // 是否刷新按钮
            sortStable: true,                                      // 是否支持排序
            cache: false,                                          // 是否使用缓存
            pagination: true,                                      // 是否显示分页
            search: false,                                         // 是否有搜索框
            clickToSelect: true,                                   // 是否点击选中行
            paginationShowPageGo: true,                            // 跳转到
            pageNumber: 1,                                         // 首页页码，默认为1
            pageSize: 10,                                          // 页面数据条数
            pageList: [10, 20, 30],
            queryParamsType: "",
            queryParams: function (params) {
                return {
                    pageSize: params.pageSize,                     // 每页记录条数
                    pageNumber: params.pageNumber                  // 当前页索引
                };
            },
            columns: [{
                field: "select",
                title: "全选",
                align: "center",
                halign: "center",
                checkbox: true,
            },
            {
                field: 'Id',
                title: '编号',
                align: "center",
                halign: "center",
                sortable: true
            },
            {
                field: 'Name',
                title: '姓名',
                align: "center",
                halign: "center"
            },
            {
                field: 'Gender',
                title: '性别',
                align: "center",
                halign: "center"
            },
            {
                field: 'Age',
                title: '年龄',
                align: "center",
                halign: "center"
            },
            {
                field: 'PhoneNumber',
                title: '手机号',
                align: "center",
                halign: "center"
            }]
        })
    </script>
</body>
</html>

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Newtonsoft.Json;

namespace WebApplication1.ashx
{
    /// <summary>
    /// LoadDataHandler 的摘要说明
    /// </summary>
    public class LoadDataHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 获取参数
            int pageSize = int.Parse(context.Request["pageSize"].ToString());
            int pageNumber = int.Parse(context.Request["pageNumber"].ToString());

            // 模拟数据
            List<Person> list = new List<Person>();
            list.Add(new Person() { Id = 1, Name = "AAAA", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 2, Name = "BBBB", Gender = "女", Age = 23, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 3, Name = "CCCC", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 4, Name = "DDDD", Gender = "女", Age = 24, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 5, Name = "EEEE", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 6, Name = "FFFF", Gender = "女", Age = 32, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 7, Name = "GGGG", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 8, Name = "HHHH", Gender = "女", Age = 26, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 9, Name = "IIII", Gender = "男", Age = 28, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 10, Name = "JJJJ", Gender = "女", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 11, Name = "KKKK", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 12, Name = "LLLL", Gender = "女", Age = 92, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 13, Name = "MMMM", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 14, Name = "NNNN", Gender = "女", Age = 42, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 15, Name = "OOOO", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 16, Name = "PPPP", Gender = "女", Age = 52, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 17, Name = "QQQQ", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 18, Name = "RRRR", Gender = "女", Age = 62, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 19, Name = "SSSS", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 20, Name = "TTTT", Gender = "女", Age = 32, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 21, Name = "UUUU", Gender = "男", Age = 42, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 22, Name = "VVVV", Gender = "女", Age = 62, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 23, Name = "WWWW", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 24, Name = "XXXX", Gender = "女", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 25, Name = "YYYY", Gender = "男", Age = 22, PhoneNumber = "123456789" });
            list.Add(new Person() { Id = 26, Name = "ZZZZ", Gender = "女", Age = 22, PhoneNumber = "123456789" });

            // 模拟分页
            var data = new
            {
                total = list.Count,
                rows = list.Skip((pageNumber - 1) * pageSize).Take(pageSize)
            };
            context.Response.Write(JsonConvert.SerializeObject(data));
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

    public class Person
    {
        /// <summary>
        /// 编号
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        /// 姓名
        /// </summary>
        public string Name { get; set; }

        /// <summary>
        /// 性别
        /// </summary>
        public string Gender { get; set; }

        /// <summary>
        /// 年龄
        /// </summary>
        public int Age { get; set; }

        /// <summary>
        /// 手机号
        /// </summary>
        public string PhoneNumber { get; set; }
    }
}

中文化

如果按照上述操作执行，你应该会得到这样的结果：
在这里插入图片描述
对于中文环境，这样的显示效果很显然是不友好的，因此我们需要打开bootstrap-table-pagejump.js文件，修改其中的两处地方：如下图所示：

到此为止，bootstrap-table-pagejump的中文化就完成了，效果如下图所示：
在这里插入图片描述