C# Bootstrap table之 分页

效果如图：

 

一、声明talbe

  <div class="container">
        <table id="table" class="table table-bordered">
        </table>
    </div>

二、JS绑定Table值

           当前使用的是服务端分页  sidePagination: "server"  。根据数据库的查询结果绑定table数据每次只查询当前显示的行，适合数据量大的程序；还有一种是客户端分页，是一次性查询出所有的内容，然后再分页，客户端分页的模式适合数据量小的程序。client模式的分页还没研究，这里就不演示了。

    <script type="text/jscript">
        $(function () {
            $('#table').bootstrapTable({
                //请求方法
                method: 'get',
                //是否显示行间隔色
                striped: true,
                //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）     
                cache: false,
                //是否显示分页（*）  
                pagination: true,
                //是否启用排序  
                sortable: true,
                //排序方式 
                sortOrder: "asc",
                //初始化加载第一页，默认第一页
                pageNumber: 1,
                //每页的记录行数（*）   
                pageSize: 10,
                //可供选择的每页的行数（*）    
                pageList: [10, 20, 30, 40],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据  
                url: "jgdx.ashx?action=GetJson",
                //默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else
                //queryParamsType:'',   
                //查询参数,每次调用是会带上这个参数，可自定义                         
                queryParams: function (params) {
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名  
                        sortOrder: params.order //排位命令（desc，asc） 
                    };
                },
                //分页方式：client客户端分页，server服务端分页（*）
                sidePagination: "server",
                //是否显示搜索
                search: false,
                strictSearch: true,
                idField: "id",
                columns: [{
                    field: 'rownum',
                    title: '序号',
                    align: 'center'
                }, {
                    field: 'dm',
                    title: '代码',
                    align: 'center'
                }, {
                    field: 'xm',
                    title: '姓名',
                    align: 'center'
                }, {
                    field: 'xb',
                    title: '性别',
                    align: 'center'
                },{
                    field: 'mid',
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        //通过formatter可以自定义列显示的内容
                        //value：当前field的值，即id
                        //row：当前行的数据
                        var a = '<a href="#" >编辑</a>&nbsp;&nbsp;';
                        var b = '<a href="#" >删除</a>';
                        return a + b;
                    }
                }, {
                    checkbox: true,
                    visible: true //是否显示复选框  
                }],
                pagination: true
            });
        });  
    </script>

三、后台代码：分页需要加上total和row属性，另外需要获取前台传入的rows和page值，来查询需要的行数。

        string sql = "";
        DataSet ds = new DataSet();
        public void ProcessRequest(HttpContext context)
        {
            string output = "";
            string action = context.Request["action"].ToString();switch (action)
            {
                case "GetJson":
                    DataTable dt = getData(context);
                    string str = DataTableToJsonWithStringBuilder(dt);
                    output = "{\"total\":" + getCout(context) + ",\"rows\":" + str + "}";
                    break;default:
                    break;
            }

            context.Response.ContentType = "text/plain";
            context.Response.Write(output);
        }public string GetJson(HttpContext context)
        {
            DataTable dt = getData(context);
            return DataTableToJsonWithStringBuilder(dt);
        }
        public DataTable getData(HttpContext context)
        {
            int rows = Convert.ToInt32(context.Request["rows"]);//显示行数
            int page = Convert.ToInt32(context.Request["page"]);//页码
            int starNum = rows * page - rows + 1;//开始行数
            int endNum = rows * page;//结束行数
            string sql = "select * from (select row_number() over(order by @@servername) as rownum,* from yhgl)a where rownum between " + starNum + " and " + endNum + "";
            DataSet ds = pub.GetDataset(sql, "xinxi");
            return ds.Tables["xinxi"];
        }
        public int getCout(HttpContext context)
        {
            string sql = "select count(*) count  from yhgl";
            DataSet ds = pub.GetDataset(sql, "xinxi");
            return Convert.ToInt32(ds.Tables["xinxi"].Rows[0]["count"]);
        }
        public string DataTableToJsonWithStringBuilder(DataTable table)
        {
            var jsonString = new StringBuilder();
            if (table.Rows.Count > 0)
            {
                jsonString.Append("[");
                for (int i = 0; i < table.Rows.Count; i++)
                {
                    jsonString.Append("{");
                    for (int j = 0; j < table.Columns.Count; j++)
                    {
                        if (j < table.Columns.Count - 1)
                        {
                            jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
                         + "\":" + "\""
                         + table.Rows[i][j].ToString() + "\",");
                        }
                        else if (j == table.Columns.Count - 1)
                        {
                            jsonString.Append("\"" + table.Columns[j].ColumnName.ToString()
                         + "\":" + "\""
                         + table.Rows[i][j].ToString() + "\"");
                        }
                    }
                    if (i == table.Rows.Count - 1)
                    {
                        jsonString.Append("}");
                    }
                    else
                    {
                        jsonString.Append("},");
                    }
                }
                jsonString.Append("]");
            }
            return jsonString.ToString();
        }