BootstrapTable分页（一）

bootstrapTable分页

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>bootstrap-table-demo-分页</title><!-- 引入bootstrap样式 --><link rel="stylesheet" href="css/bootstrap.min.css" /><!-- 引入bootstrap-table样式 --><link rel="stylesheet" href="css/plugins/bootstrap-table/bootstrap-table.min.css" /></head><body style="width: 90%;margin: 0 auto;"><h3>bootstrap-table分页</h3><div id="toolbar"><button class="btn btn-primary" id="btnRefresh">Refresh</button></div><!--bootstrap-table表格--><table id="data-table" ></table><!-- jquery --><script type="text/javascript" src="js/jquery.min.js" ></script><!-- bootstrap --><script type="text/javascript" src="js/bootstrap.min.js" ></script><!-- bootstrap-table --><script type="text/javascript" src="js/plugins/bootstrap-table/bootstrap-table.min.js" ></script><!-- 引入中文语言包 --><script type="text/javascript" src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" ></script><script type="text/javascript">var $table = $('#data-table');//查询参数var queryParams = {id: 1};/*** 初始化Table*///先销毁表格$table.bootstrapTable('destroy');//初始化表格$table.bootstrapTable({//表格参数//请求地址,此处数据为本地加载url: 'data1.json',//请求方式method: "get",//请求内容类型contentType: "application/x-www-form-urlencoded",//数据类型dataType: "json",//table高度：如果没有设置，表格自动根据记录条数觉得表格高度height: '582',//是否显示行间隔色striped: true,//是否启用排序sortable: true,//排序方式sortOrder: "asc",//是否使用缓存cache: false,//每行的唯一标识uniqueId: "id",//指定工具栏toolbar: "#toolbar",//显示刷新按钮showRefresh: false,//切换显示样式showToggle: false,//默认显示详细视图cardView: false,//是否显示搜索search: true,//是否显示分页pagination: true,//是否启用点击选中行clickToSelect: true,//最少要显示的列数minimumCountColumns: 2,//显示隐藏列showColumns: false,//cell没有值时显示undefinedText: '-',//分页方式：client客户端分页，server服务端分页
/*                指定。注意，这两种后台传过来的json数据格式也不一样 client : 正常的json array格式 [{},{},{}] server： {“total”:0,”rows”:[]} 其中total表示查询的所有数据条数，后面的rows是指当前页面展示的数据量。*/sidePagination: "client",//每页的记录行数pageSize: 3,//初始化加载第1页，默认第1页pageNumber: 1,//可供选择的每页的行数pageList: "[10, 20, 50, 80, 100]",paginationFirstText: "首页",paginationPreText: "上一页",paginationNextText: "下一页",paginationLastText: "末页",//按钮样式buttonsClass: 'btn',//分页器classiconSize: 'pager',//查询条件queryParams: queryParams,//列参数//表头columns: [{title: '选择',checkbox: true,align: 'center' // 居中显示}, {field: 'id',title: 'Item ID',align: 'center' // 居中显示}, {field: 'name',title: 'Item Name',align: 'center' // 居中显示}, {field: 'price',title: 'Item Price',align: 'center' // 居中显示} ],onLoadSuccess: function (res) {//可不写//加载成功时console.log(res);}, onLoadError: function (statusCode) {return "加载失败了"}, formatLoadingMessage: function () {//正在加载return "拼命加载中...";}, formatNoMatches: function () {//没有匹配的结果return '无符合条件的记录';}});// 获取表格所有已经勾选的行数据，为一个对象数组var selects = $table.bootstrapTable('getSelections');//刷新$("#btnRefresh").on('click', function(){$table.bootstrapTable('refresh');});</script></body>
</html>

data1.json

[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 1",
"price": "$1"
},
{
"id": 5,
"name": "Item 1",
"price": "$1"
},
{
"id": 6,
"name": "Item 1",
"price": "$1"
},
{
"id": 7,
"name": "Item 1",
"price": "$1"
}
]

bootstrapTable分页（二） https://blog.csdn.net/csdnluolei/article/details/83510577

BootstrapTable分页（一）相关推荐

php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
bootstraptable 分页循环_关于bootstrap-table服务端分页问题
昨天项目中涉及到了前端表格分页问题.数据一共有1万多条,所以选择了后端分页. 之前用的都是前端分页,第一次使用后端分页.网上也找到了一些例子,最后做出来了. 这里用的是bootstrap-table插 ...
BootstrapTable分页（二）
看完上篇博客相信看完你对bootstrapTable的使用也有了进一步的认识,我们来看看bootstrapTable是怎么分页的先看页面代码: <!DOCTYPE html> < ...
BootStrap-Table分页参数传不到后台，后台接收分页参数为null
最近自己整合了个springBoot小项目,使用bootstrap作为后端ui框架,但是在使用bootstrap-table时出现分页参数失效的问题,前台显示参数正常传递,但是后台接收值一直为null ...
处理bootstrap-table分页复选框选中获取表单数据
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
php bootstraptable分页,php+bootstrap+dataTable+jquery分页列表
$(document).ready(function(){ $("#table_local").dataTable({ "bSort":true, " ...
BootstrapTable分页参数
var p={}; //分页 p.page = params.data.offset / params.data.limit + 1; p.size = params.data.limit;
BootstrapTable入门Demo
bootstrapTable是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能. 别的不多说,直接上 ...
Bootstrap-table 的使用
新手浅谈,多多包涵.最近使用boostrap-table的次数较频繁,在这里总结总结. 一般常用的情况和功能(在html中定义表头) <div> <table id="ta ...

BootstrapTable分页（一）

BootstrapTable分页（一）相关推荐

最新文章

热门文章