明輝手游網(wǎng)中心:是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

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

[摘要]要考慮函數(shù)可被可重復(fù)使用(調(diào)用),需要將可變化的變?yōu)閰?shù)封裝起來function HQCreatTables(ob) { var option = {method: get,dataType: "json",striped: true,//設(shè)置為 true 會有隔行變色效...
要考慮函數(shù)可被可重復(fù)使用(調(diào)用),需要將可變化的變?yōu)閰?shù)封裝起來


function HQCreatTables(ob) {    
            var option = {
        method: 'get',
        dataType: "json",
        striped: true,//設(shè)置為 true 會有隔行變色效果  
        undefinedText: "空",//當(dāng)數(shù)據(jù)為 undefined 時顯示的字符  
        pagination: true, //分頁  
        // paginationLoop:true,//設(shè)置為 true 啟用分頁條無限循環(huán)的功能。  
        showToggle: false,//是否顯示 切換試圖(table/card)按鈕  
        showColumns: false,//是否顯示 內(nèi)容列下拉框  
        pageNumber: 1,//如果設(shè)置了分頁,首頁頁碼  
        // showPaginationSwitch:true,//是否顯示 數(shù)據(jù)條數(shù)選擇框  
        pageSize: 10,//如果設(shè)置了分頁,頁面數(shù)據(jù)條數(shù)  
        pageList: [10, 20, 40],  //如果設(shè)置了分頁,設(shè)置可供選擇的頁面數(shù)據(jù)條數(shù)。設(shè)置為All 則顯示所有記錄。  
        paginationPreText: '?',//指定分頁條中上一頁按鈕的圖標(biāo)或文字,這里是<  
        paginationNextText: '?',//指定分頁條中下一頁按鈕的圖標(biāo)或文字,這里是>  
        // singleSelect: false,//設(shè)置True 將禁止多選  
        search: false, //顯示搜索框  
        data_local: "zh-US",//表格漢化  
        sidePagination: "server", //服務(wù)端處理分頁  
        queryParams: function (params) {//自定義參數(shù),這里的參數(shù)是傳給后臺的,我這是是分頁用的 
            return {//這里的params是table提供的  
                cp: params.offset,//從數(shù)據(jù)庫第幾條記錄開始  
                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)聽函數(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加載成功寫的函數(shù),是因為我自己需要才寫的。把table里的數(shù)據(jù)放在全局變量后,查詢詳細(xì)信息就不用再做ajax。
這個'load-success.bs.table'api我還有個問題,當(dāng)這個table被多次load-success,這個函數(shù)就會被運(yùn)行相同多次,對頁面顯示功能無影響。但自己還并不明白之前的table被$(ob.id).bootstrapTable('destroy')銷毀了,為什么還會被記入。
函數(shù)被調(diào)用的時候?qū)懭胱约旱膮?shù),colums是第一行表頭。


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

.net的后臺傳的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);
        }

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

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

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

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


網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。