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

妖狐艹你老母 2022-06-10 00:37 360阅读 0赞

# 一、前言 #

###     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][http_download.csdn.net_detail_alan_liuyue_9922804]

[http_download.csdn.net_detail_alan_liuyue_9922804]: http://download.csdn.net/detail/alan_liuyue/9922804