Cette fois, je vais vous apporter BootStrap+numéro de série de tri et de pagination de table, et quelles sont les notes de BootStrap+numéro de série de tri et de pagination de table. cas, jetons un coup d'oeil.
Avant-propos
Lorsque vous utilisez la table d'amorçage, vous utiliserez inévitablement la pagination qui propose deux méthodes : la pagination du client et la pagination du serveur.
-
La pagination client n'est généralement pas utilisée dans les projets. Généralement, la quantité de données de table est importante et l'utilisation de la pagination client entraînera une explosion du cache, nous choisissons donc la pagination serveur.
-
est raisonnable s'il existe, et le client peut également être utilisé (lorsque la quantité de données est particulièrement faible par rapport à la méthode serveur, sa pagination). les numéros de séquence sont automatiquement continus. Les numéros de série de la pagination en mode serveur ne sont pas consécutifs (chaque page commence à 1 et non à partir du numéro de série final de la page précédente). Cet article se concentre sur la résolution de ce problème.
Résultats paginés originaux
La pagination du client, en utilisant la valeur d'index dans le formateur de la table d'amorçage, peut rendre le numéro de série continu
Pagination du serveur, en raison de l'absence de la position actuelle de la page pageNumber et de la taille de chaque page pageSize, la valeur de l'index ne peut pas être déterminée. L'utilisation du formateur pour renvoyer l'index est uniquement l'index de la page actuelle.
Étapes de la solution
Quelle est la raison de ce problème ? Étant donné que le paramètre d'index renvoyé par le formateur que nous utilisons, ce paramètre est l'index de la table. Toutes les n données totales du client sont sur le client, et l'index est 1-n, et le. pagination du serveur à chaque fois Le serveur renvoie uniquement les données de la page actuelle au client, donc l'index n'a qu'une taille de 1 page et pageSize est la quantité de données pour une page, donc ce problème se produit.
Compte tenu du problème que le serveur ne renvoie qu'une seule page de données, ce qui fait que le numéro de série commence à 1 à chaque fois que la page est tournée, nous devons associer les données de page du serveur et du client, nous les modifions donc en fonction sur le formateur d'origine, laissez-le passer ce paramètre et tout ira bien.
Tout d'abord, regardons le code source js de la table boostrap. Nous pouvons voir quelques méthodes d'écriture de fonctions internes, telles que :
BootstrapTable.prototype.showRow = function (params) {
this.toggleRow(params, true);
};Copier après la connexion
.
Alors peut-on définir soi-même une fonction fonctionnelle ? La réponse est oui, nous écrirons également une fonction qui renvoie la valeur d'index dont nous avons besoin. La définition est la suivante :
BootstrapTable.prototype.getPage = function (param) {
return this.options.pageSize * this.options.pageNumber + 1;
}Copier après la connexion
La raison pour laquelle nous pouvons écrire cette fonction pour passer le paramètre index est que pageSize et pageNumber eux-mêmes sont des paramètres internes de la table d'amorçage, et ils sont tous intégrés dans les options, donc si vous avez ce paramètre, je peux écrire la fonction pour renvoyer ceci valeur.
Après avoir écrit une fonction, vous devez écrire cette fonction dans la liste des fonctions internes, sinon elle ne sera pas utilisée. Insérez getIndex comme sa fonction d'origine comme suit (la quatrième ligne) :
var allowedMethods = [
'getOptions',
'getSelections', 'getAllSelections', 'getData', 'getIndex',
'load', 'append', 'prepend', 'remove', 'removeAll',
'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
'mergeCells',
'checkAll', 'uncheckAll', 'checkInvert',
'check', 'uncheck',
'checkBy', 'uncheckBy',
'refresh',
'resetView',
'resetWidth',
'destroy',
'showLoading', 'hideLoading',
'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
'showAllColumns', 'hideAllColumns',
'filterBy',
'scrollTo',
'getScrollPosition',
'selectPage', 'prevPage', 'nextPage',
'togglePagination',
'toggleView',
'refreshOptions',
'resetSearch',
'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
'updateFormatText'
];
Copier après la connexion
De cette façon, nous pouvons l'utiliser dans le tableau. Nous utilisons la méthode getIndex dans le formateur pour obtenir la continuité des numéros de série de pagination (modifiable : {…} est l'édition de lignes, veuillez consulter mon autre blog) :
$("tb_departments").bootstrapTable({
method: 'post', //请求方式
height: 500,
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式：client客户端分页，server服务端分页
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 4, //每页的记录行数（*）
pageList: [4, 20, 25, 30], //可供选择的每页的行数（*）
//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
//showPaginationSwitch: true,
showExport: true,
exportDataType: "all",
showExport: true, //是否显示导出按钮
buttonsAlign:"right", //按钮位置
exportTypes:[ 'csv', 'txt', 'excel', 'pdf'], //导出文件类型
Icons:'glyphicon-export',
showColumns: true, //是否显示所有的列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
showExportAll:true, //是否显示全部导出按钮
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 1, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showHeader: true,
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
},
columns: [
{
title: '编号',//标题
formatter: function (value, row, index) {
return $("tb_departments").bootstrapTable("getIndex");
}
},
{
align: "left",//水平居中
halign: "left",//垂直居中
field: "vehplate",
title: "车牌号码",
editable: {
type: 'text',
title: "车牌号码",
noeditFormatter: function (value,row,index) {
var result={filed:"vehplate",value:value};
return result;
},
validate: function (value) {
if ($.trim(value) == '') {
return '车牌号码不能为空!';
}
}
}
},{
align: "left",
halign: "left",
field: "price",
sortable:true,
title: "原值(万元)",
editable: {
type: 'text',
title: "原值(万元)",
noeditFormatter: function (value,row,index) {
var result={filed:"price",value:value,class:"badge bg-green",style:"padding:5px 10px;"};
return result;
}
}
},
{
align: "left",
halign: "left",
field: "netvalue",
sortable:true,
title: "净值(万元)",
editable: {
type: 'text',
title: "净值(万元)",
noeditFormatter: function (value,row,index) {
var result={filed:"netvalue",value:value,class:"badge bg-orange",style:"padding:5px 10px;"};
return result;
}
}
},
{
align: "left",
halign: "left",
field: "accumulatedmileage",
sortable:true,
title: "累计里程",
editable: {
type: 'text',
title: "累计里程",
noeditFormatter: function (value,row,index) {
var result={filed:"accumulatedmileage",value:value};
return result;
}
}
},
{
align: "left",
halign: "left",
field: "accumulateddepreciation",
sortable:true,
title: "累计折旧(万元)",
editable: {
type: 'text',
title: "累计折旧(万元)",
noeditFormatter: function (value,row,index) {
var result={filed:"accumulateddepreciation",value:value};
return result;
}
}
},
{
align: "left",
halign: "left",
field: "vehClass",
title: "车型"
},
{
align: "left",
halign: "left",
field: "vehtype1Desc",
title: "车类"
}, {
align: "left",
halign: "left",
field: "vehtype2Desc",
//width: 100,
title: "车类明细"
}
],
onPageChange:function(number, size)
{
//设置在分页事件触发时，传递分页参数给后台，重新加载数据
me.queryBaseParam.limit=size;
me.queryBaseParam.start=number;
me.ajaxGetData();
},
onSort: function (name, order) {
//传递参数给后台进行排序
me.queryBaseParam.sort=name;
me.queryBaseParam.order=order;
me.ajaxGetData();
}
});Copier après la connexion
Le résultat final est le même que le numéro de séquence de radiomessagerie du client.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
JS+canvas dessine un diagramme circulaire
js implémente une limite de caractères Caractères chinois = deux caractères
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
