开发者社区> 尘光掠影> 正文

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

简介: 版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76777359 一、前言     bootstrap-table是非常方便好用的前端表格分页插件,使用者只需要提供数据源就能实现非常完美的分页 效果,其分页方式可以分成客户端分页和服务端分页,其接收的数据源都是json数据格式。
+关注继续查看
版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76777359

一、前言

    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





版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
bboss发布apache cxf 2.7.6服务和定义客户端服务实例可能产生冲突解决办法
bboss发布apache cxf 2.7.6服务和定义客户端服务实例放到一起可能会产生冲突并导致服务发布失败,本文介绍这个冲突的解决办法。 首先介绍一下冲突现象,假设在bboss mvc的xml配置文件中定义一个控制器,并为这个控制器注入通过org.
1116 0
Python 技术篇-socket套接字实现服务器客户端消息传递实例演示,UDP实现
Python 技术篇-socket套接字实现服务器客户端消息传递实例演示,UDP实现
35 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18592 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
19403 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24471 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
32658 0
Java Socket服务端客户端通信实例
本文目录 1. Socket是啥 2. 运行机制 3. 代码示例 4. 测试 5. 小结
37 0
Axis2使用WebService的客户端实例
54powermanAxis2和Axis相比,增加了异步调用的方式,而且代码的使用更方便。本文用一个例子来描述如何快速使用Axis2来创建WebService客户端代码。
843 0
+关注
97
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载