Maison > interface Web > js tutoriel > le corps du texte

Partage d'exemples de pagination de traitement côté serveur de table Bootstrap

小云云
Libérer: 2018-01-09 10:43:16
original
2970 Les gens l'ont consulté

Cet article présente principalement en détail le traitement de la pagination côté serveur de la table bootstrap. L'arrière-plan est .net, qui a une certaine valeur de référence. J'espère que cela pourra aider tout le monde.

Pour considérer que la fonction peut être réutilisée (appelée), les paramètres modifiables doivent être encapsulés


function HQCreatTables(ob) {
 var option = {
 method: 'get',
 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;
 });
}
Copier après la connexion

La table est chargée avec succès et écrite La fonction a été écrite parce que j'en avais besoin. Après avoir placé les données dans le tableau dans des variables globales, il n'est pas nécessaire d'utiliser Ajax pour interroger des informations détaillées.
J'ai toujours un problème avec cette API 'load-success.bs.table' Lorsque cette table est chargée avec succès plusieurs fois, cette fonction sera exécutée le même nombre de fois sans affecter la fonction d'affichage de la page. Mais je ne comprends toujours pas pourquoi la table précédente a été détruite par $(ob.id).bootstrapTable('destroy'), pourquoi elle est toujours enregistrée.
Lorsque la fonction est appelée, écrivez ses propres paramètres et columns est l'en-tête de la première ligne.


var tab = { id: &#39;#Table&#39;, url: &#39;/HealthRecords/Selects&#39;, columns: columns }
HQCreatTables(tab);
Copier après la connexion

Le json passé en arrière-plan de .net doit également avoir une valeur de page, les lignes sont vos données d'affichage et le total : le nombre de toutes les données affichées.


[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);
 }
Copier après la connexion

Comme ci-dessus, ne transmettez pas les données d'arrière-plan et ne limitez pas le tableau avec plus de conditions en une génération
Comment faire lorsque vous en avez. conditions de requête, vous devriez Comment faire ?

Lorsque vous verrez l'image, vous comprendrez qu'il vous suffit d'ajouter vos conditions de requête à l'url lors de l'appel de la fonction.

Recommandations associées ;

Explication détaillée du champ de recherche et de la fonction de requête de la table Bootstrap

Comment gérer la pagination côté serveur de la table bootstrap

Explication détaillée de la façon d'utiliser le plug-in bootstrap Table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal