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();
        }