bootstrap-table分页
首先引用css:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-table.css" />
接着接引js:
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-table.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap-table-zh-CN.js" type="text/javascript" charset="utf-8"></script>
提示:bootstrap-table-zh-CN这个js主要是把bootstrap中的窗体文本提示转中文。
写一个空的table标签即可,js可自动生成表格
<table class="table table-bordered" id="ArbetTable"></table>
初始化的js,放到script标签即可
var TableInit = function() {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function() {
$('#ArbetTable').bootstrapTable('destroy');
$('#ArbetTable').bootstrapTable({
url: '/Interface/GetData', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams, //传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: , //初始化加载第一页,默认第一页
pageSize: , //每页的记录行数(*)
pageList: [, , , ], //可供选择的每页的行数(*)
search: false, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
contentType: "application/x-www-form-urlencoded",
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: , //最少允许的列数
clickToSelect: false, //是否启用点击选中行
height: , //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "no", //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
field: 'ip',
title: '登录IP数'
}, {
field: 'userName',
title: '新增用户'
}, {
field: 'Sex',
title: '充值人数'
},
{
field: 'Sex',
title: '充值金额'
},
{
field: 'Sex',
title: '投注总额'
},
{
field: 'operate',
title: '盈亏',
},
{
field: 'operate',
title: '代理分润金额',
}
],
rowStyle: function(row, index) {
var classesArr = ['success', 'info'];
var strclass = "";
if (index % === ) { //偶数行
strclass = classesArr[];
} else { //奇数行
strclass = classesArr[];
}
return {
classes: strclass
};
}, //隔行变色
}); }; //得到查询的参数
oTableInit.queryParams = function(params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset
};
return temp;
};
return oTableInit;
};
bootstrap-table分页的更多相关文章
- Bootstrap table分页问题汇总
首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...
- bootstrap table分页(前后端两种方式实现)
bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...
- bootstrap table 分页序号递增问题 (转)
原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页 ...
- bootstrap table分页,重新数据查询时页码为当前页问题
问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...
- bootstrap table分页limit计算pageIndex和pageSize
由于bootstrap table的js无法直接获取pageSize和pageIndex的值,只能通过limit进行计算.
- Bootstrap table 分页 In asp.net MVC
中文翻译文档: http://blog.csdn.net/rickiyeat/article/details/56483577 版本说明: Jquery v2.1.1 Bootstrap V3.3.7 ...
- [转]Bootstrap table 分页 In asp.net MVC
本文转自:https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html 中文翻译文档: http://blog.csdn.net/rickiyeat ...
- bootstrap table 分页后,重新搜索的问题
前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...
- bootstrap table分页后刷新跳到第一页
之前这样写是不行的,这时候页数还是原来的页数 $('#tb_departments').bootstrapTable(('refresh')); 需要改成: $("#tb_departmen ...
- bootstrap table 分页显示问题
1.bootstrap-table客户端分页 客户端分页的数据源可以是后台服务器端传递过来(一次性获取,即获取所有你需要的数据),点击页码不再请求后台,利用页面缓存分页;cache : true, / ...
随机推荐
- 【FreeMarker】FreeMarker快速入门(一)
什么是 FreeMarker FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具. 它不是面向最终用户 ...
- QML按键
1.普通用法 import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2 ApplicationWindow { ...
- 谷歌Chrome浏览器 截取网页长图方法
Chrome浏览器: 1.按F12打开调试页面 2.按下ctrl + shift + p 3.输入命令 Capture full size screenshot 并回车 4.浏览器会自动截取整个网页内 ...
- Egret的第三方库制作,以及在大型项目中的应用
目录: 一 创建第三方库 二 TypeScript库 三 JavaScript库 四 第三方库制作在大型RPG中的实际应用 参考: 第三方库的使用方法 目标: 本文目的是将现有游戏的框架制作成第三方库 ...
- Linux的桌面虚拟化技术KVM(三)——KVM虚拟机克隆和快照
Linux的桌面虚拟化技术KVM(一)——新建KVM虚拟机 Linux的桌面虚拟化技术KVM(二)——远程桌面管理 (1).KVM虚拟机克隆 KVM虚拟克隆命令virt-clone [选项] 常用选项 ...
- LeetCode_392. Is Subsequence
392. Is Subsequence Easy Given a string s and a string t, check if s is subsequence of t. You may as ...
- 小程序开发框架----WXSS
规定了屏幕宽度为750个RPX,从而可以通过屏幕宽度来进行自适应
- 基因id转换
DAVID网站提供了id转换的功能 1 选择上传gene list文件 2 选择上传ID的类型,我们ID-list.txt中的是Ensembl Gene ID,所以这里选ENSEMBL_GENE_ID ...
- ElasticSearch RestHighLevelClient 通用操作
项目中使用到ElasticSearch作为搜索引擎.而ES的环境搭建自然是十分简单,且本身就适应于分布式环境,因此这块就不多赘述.而其本身特性和查询语句这篇博文不会介绍,如果有机会会深入介绍. 所 ...
- Windows Subsystem for Linux(wsl)使用
由于项目有一些环境需要在linux环境运行.可用微软win10的WSL来搭配使用 安装wsl 控制面板--程序和功能--启用或关闭windows功能,适用于linux的windows系统 应用商城下载 ...