Bootstrap Table server-side processing paging example sharing-JS Tutorial-php.cn

Bootstrap Table server-side processing paging example sharing

小云云

Release： 2018-01-09 10:43:16

Original

2999 people have browsed it

This article mainly introduces the bootstrap Table server-side paging processing in detail. The background is .net, which has certain reference value. Interested friends can refer to it. I hope it can help everyone.

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 , I wrote it because 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, do not pass the background data and do not restrict more conditions in one generation. The table has been generated.
How to do it 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.

Related recommendations;

Detailed explanation of Bootstrap Table search box and query function

How to handle bootstrap Table server-side paging

Detailed explanation on the use of bootstrap Table plug-in

The above is the detailed content of Bootstrap Table server-side processing paging example sharing. For more information, please follow other related articles on the PHP Chinese website!