如何處理bootstrap Table 服務(wù)端處理分頁(yè)

function HQCreatTables(ob) {    
            var option = {
        method: 'get',
        dataType: "json",
        striped: true,//設(shè)置為 true 會(huì)有隔行變色效果  
        undefinedText: "空",//當(dāng)數(shù)據(jù)為 undefined 時(shí)顯示的字符  
        pagination: true, //分頁(yè)  
        // paginationLoop:true,//設(shè)置為 true 啟用分頁(yè)條無(wú)限循環(huán)的功能。  
        showToggle: false,//是否顯示 切換試圖（table/card）按鈕  
        showColumns: false,//是否顯示 內(nèi)容列下拉框  
        pageNumber: 1,//如果設(shè)置了分頁(yè)，首頁(yè)頁(yè)碼  
        // showPaginationSwitch:true,//是否顯示 數(shù)據(jù)條數(shù)選擇框  
        pageSize: 10,//如果設(shè)置了分頁(yè)，頁(yè)面數(shù)據(jù)條數(shù)  
        pageList: [10, 20, 40],  //如果設(shè)置了分頁(yè)，設(shè)置可供選擇的頁(yè)面數(shù)據(jù)條數(shù)。設(shè)置為All 則顯示所有記錄。  
        paginationPreText: '?',//指定分頁(yè)條中上一頁(yè)按鈕的圖標(biāo)或文字,這里是<  
        paginationNextText: '?',//指定分頁(yè)條中下一頁(yè)按鈕的圖標(biāo)或文字,這里是>  
        // singleSelect: false,//設(shè)置True 將禁止多選  
        search: false, //顯示搜索框  
        data_local: "zh-US",//表格漢化  
        sidePagination: "server", //服務(wù)端處理分頁(yè)  
        queryParams: function (params) {//自定義參數(shù)，這里的參數(shù)是傳給后臺(tái)的，我這是是分頁(yè)用的 
            return {//這里的params是table提供的  
                cp: params.offset,//從數(shù)據(jù)庫(kù)第幾條記錄開(kāi)始  
                ps: params.limit//找多少條              };
        }
    }    if (ob.url) {
        option.url = ob.url;
    }    if (ob.columns) {
        option.columns = ob.columns;
    }
    $(ob.id).bootstrapTable('destroy');
    $(ob.id).bootstrapTable(option);    if (ob.data) {
        $(ob.id).bootstrapTable('load', ob.data);
    }
    $(ob.id).on('load-success.bs.table', function (data) {//table加載成功后的監(jiān)聽(tīng)函數(shù)  
        var $table = $(ob.id);        var allTableData = JSON.stringify($table.bootstrapTable('getData'));//獲取表格的所有內(nèi)容行
        var obj = JSON.parse(allTableData);
        console.log(obj)
        Xstate.TableArr = obj;
    });
}

table加載成功寫(xiě)的函數(shù)，是因?yàn)槲易约盒枰�才�?xiě)的。把table里的數(shù)據(jù)放在全局變量后，查詢?cè)敿?xì)信息就不用再做ajax。
這個(gè)'load-success.bs.table'api我還有個(gè)問(wèn)題，當(dāng)這個(gè)table被多次load-success，這個(gè)函數(shù)就會(huì)被運(yùn)行相同多次，對(duì)頁(yè)面顯示功能無(wú)影響。但自己還并不明白之前的table被$(ob.id).bootstrapTable('destroy')銷毀了，為什么還會(huì)被記入。
函數(shù)被調(diào)用的時(shí)候?qū)懭胱约旱膮��?shù)，colums是第一行表頭。

var tab = { id: '#Table', url: '/HealthRecords/Selects', columns: columns }
HQCreatTables(tab);

.net的后臺(tái)傳的json也一定要有page值，rows是你的顯示data，total：所有顯示數(shù)據(jù)的條數(shù)。

[HttpGet]        
//GET: HealthRecords        
public JsonResult Selects(HealthRecordView m, int cp = -4, int ps = -5, string start = null, string end = null)
        {            string sa = Session["hid"].ToString();
            m.hid = sa;            
            string sqls = " SELECT * from A where hid='" + m.hid + "'  ";            
            string sqlss = " SELECT count(*) from A where hid='" + m.hid + "' ";            
            if (!string.IsNullOrWhiteSpace(m.Name))
            {
                sqls += " and Name like '%" + m.Name + "%'";
                sqlss += " and Name like '%" + m.Name + "%'";
            }            if (!string.IsNullOrWhiteSpace(start) && !string.IsNullOrWhiteSpace(end))
            {
                sqls += " and r_time > '" + start + "' and r_time <'" + end + "'";
                sqlss += " and r_time > '" + start + "' and r_time <'" + end + "'";
            }
            sqls += " order by r_time desc ";            
            if (cp != -4&& ps != -5)
            {
                sqls += "  limit  "+ cp + "," + ps + " ";
            }
            
            var arr = db.Database.SqlQuery<HealthRecordView>(sqls).ToArray();            
            int RoleNames = db.Database.SqlQuery<int>(sqlss).FirstOrDefault();            
            return Json(new { page = cp, rows = arr, total = RoleNames }, JsonRequestBehavior.AllowGet);
        }

如上，一次生成不要傳對(duì)后臺(tái)數(shù)據(jù)不要限制更多條件的table已經(jīng)生成了
如何當(dāng)你有查詢條件的時(shí)候，應(yīng)該怎么做？

當(dāng)你看都到圖片的時(shí)候，你就明白了，只需要在調(diào)用函數(shù)的時(shí)候，在url里增加你的查詢條件。

以上就是如何處理bootstrap Table 服務(wù)端處理分頁(yè) 的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！