bootstrap-table表格客户端分页实例

最新推荐文章于 2023-08-17 10:50:26 发布

weixin_33772645

最新推荐文章于 2023-08-17 10:50:26 发布

阅读量98

点赞数

文章标签：前端 javascript ViewUI

原文链接：https://yq.aliyun.com/articles/662189

版权

一、前言

bootstrap-table是非常方便好用的前端表格分页插件，使用者只需要提供数据源就能实现非常完美的分页

效果，其分页方式可以分成客户端分页和服务端分页，其接收的数据源都是json数据格式。服务端分页在项目中

应用得非常的广泛，但有时也需要使用客户端分页来加快分页速度，加快分页浏览效率。本篇博客就不介绍服务

端分页，只提供bootstrap-table客户端分页的简单例子（数据源也从前端获取），供初学者了解使用。

二、实例

<title>bootstrap-table表格客户端分页</title>

	<link rel="stylesheet" href="./bootstrap/css/bootstrap/bootstrap.css" />
	<link rel="stylesheet" href="./bootstrap-table/bootstrap-table.css" />	
	
	<script src="./jquery/jquery.min.js"></script>
	<script src="./bootstrap/js/bootstrap.js"></script>	
	<script src="./bootstrap-table/bootstrap-table.js"></script>
	<script src="./bootstrap-table/bootstrap-table-export.js"></script>
	<script src="./extends/tableExport/jquery.base64.js"></script>
	<script src="./extends/tableExport/tableExport.js"></script>

</head>

<body >
	<div id="reportTableDiv" >
		<table id="reportTable"></table>
	</div>
	<script type="text/javascript">
	//手动制造30条数据
	var datas  = [];
	for(var i=0;i<30;i++){
		datas[i]={"name":"傻逼"+i+"号","age":"年龄："+i+"岁","sex":"男"+i}
	}
	
	$(function () {
		$('#reportTable').bootstrapTable({
			method: 'get',
			cache: false,
			height: 400,
			striped: true,
			pagination: true,
			pageSize: 20,
			pageNumber:1,
			pageList: [10, 20, 50, 100, 200, 500],  sidePagination:'client',
			search: true,
			showColumns: true,
			showRefresh: false,
			showExport: false,
			exportTypes: ['csv','txt','xml'],
			search: true,
			clickToSelect: true,
			columns: 
			[
				{field:"checked",checkbox:true},
				{field:"name",title:"测试姓名",align:"center",valign:"middle",sortable:"true"},
				{field:"age",title:"年龄",align:"center",valign:"middle",sortable:"true"},
				{field:"sex",title:"性别",align:"center",valign:"middle",sortable:"true"},
			],
			data:datas,
		});										
	});	
	</script>
<div>
	
</body>
</html>

三、总结

1. bootstrap-table客户端分页只需要几个步骤即可实现：引入bootstrap的js、css；html页面添加一个table

标签同时给id赋值；js添加初始化代码；

2.bootstrap-table客户端分页的数据源可以是后台服务器端传递过来（一次性获取，即获取所有你需要的数据），然后将sidePagination的参数修改成“client”（即客户端分页），去掉data，添加url，即可实现客户端分页；也可以是前端js获取数据源，该实例使用的是前端 js的数据源，初始化参数需要添加data，同时去掉url（或者将url的参数设置为空即:''）；

3.本博客的实例下载路径：http://download.csdn.net/detail/alan_liuyue/9922804

weixin_33772645

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table表格客户端分页实例

版权声明：本文为博主原创文章，如需转载，请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76777359 一、前言 bootstrap-table是非常方便好用的...
复制链接

扫一扫