How to handle bootstrap Table server processing paging-HTML Tutorial-php.cn

How to handle bootstrap Table server processing paging

一个新手

Release： 2017-10-19 10:00:36

Original

2505 people have browsed it

To consider that the function can be reused (called), it is necessary to encapsulate the changeable parameters

function HQCreatTables(ob) {    
            var option = {
        method: &#39;get&#39;,
        dataType: "json",
        striped: true,//设置为 true 会有隔行变色效果  
        undefinedText: "空",//当数据为 undefined 时显示的字符  
        pagination: true, //分页  
        // paginationLoop:true,//设置为 true 启用分页条无限循环的功能。  
        showToggle: false,//是否显示 切换试图（table/card）按钮  
        showColumns: false,//是否显示 内容列下拉框  
        pageNumber: 1,//如果设置了分页，首页页码  
        // showPaginationSwitch:true,//是否显示 数据条数选择框  
        pageSize: 10,//如果设置了分页，页面数据条数  
        pageList: [10, 20, 40],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。  
        paginationPreText: &#39;?&#39;,//指定分页条中上一页按钮的图标或文字,这里是<  
        paginationNextText: &#39;?&#39;,//指定分页条中下一页按钮的图标或文字,这里是>  
        // singleSelect: false,//设置True 将禁止多选  
        search: false, //显示搜索框  
        data_local: "zh-US",//表格汉化  
        sidePagination: "server", //服务端处理分页  
        queryParams: function (params) {//自定义参数，这里的参数是传给后台的，我这是是分页用的 
            return {//这里的params是table提供的  
                cp: params.offset,//从数据库第几条记录开始  
                ps: params.limit//找多少条              };
        }
    }    if (ob.url) {
        option.url = ob.url;
    }    if (ob.columns) {
        option.columns = ob.columns;
    }
    $(ob.id).bootstrapTable(&#39;destroy&#39;);
    $(ob.id).bootstrapTable(option);    if (ob.data) {
        $(ob.id).bootstrapTable(&#39;load&#39;, ob.data);
    }
    $(ob.id).on(&#39;load-success.bs.table&#39;, function (data) {//table加载成功后的监听函数  
        var $table = $(ob.id);        var allTableData = JSON.stringify($table.bootstrapTable(&#39;getData&#39;));//获取表格的所有内容行
        var obj = JSON.parse(allTableData);
        console.log(obj)
        Xstate.TableArr = obj;
    });
}

Copy after login

table loads the successfully written function because I wrote it when I needed it. After placing the data in the table in global variables, there is no need to use Ajax to query detailed information.
I still have a problem with this 'load-success.bs.table' api. When this table is loaded-successed multiple times, this function will be run the same number of times without affecting the page display function. But I still don't understand why the previous table was destroyed by $(ob.id).bootstrapTable('destroy'), why it is still recorded.
Write its own parameters when the function is called, and columns is the header of the first row.

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

Copy after login

.net’s background json must also have a page value, rows is your display data, total: the number of all displayed data.

[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=&#39;" + m.hid + "&#39;  ";            
            string sqlss = " SELECT count(*) from A where hid=&#39;" + m.hid + "&#39; ";            
            if (!string.IsNullOrWhiteSpace(m.Name))
            {
                sqls += " and Name like &#39;%" + m.Name + "%&#39;";
                sqlss += " and Name like &#39;%" + m.Name + "%&#39;";
            }            if (!string.IsNullOrWhiteSpace(start) && !string.IsNullOrWhiteSpace(end))
            {
                sqls += " and r_time > &#39;" + start + "&#39; and r_time <&#39;" + end + "&#39;";
                sqlss += " and r_time > &#39;" + start + "&#39; and r_time <&#39;" + end + "&#39;";
            }
            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);
        }

Copy after login

As above, once generated, do not pass the background data and do not restrict more conditions. The table has been generated.
What should you do when you have query conditions? ?

When you see the picture, you will understand. You only need to add your query conditions to the url when calling the function.

The above is the detailed content of How to handle bootstrap Table server processing paging. For more information, please follow other related articles on the PHP Chinese website!