本文主要是介绍基于jqPaginator分页插件Boostrap分页样式TABLE表格操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
首先需要头文件：引入jqPaginator-js文件、Boostrap样式-css文件。
//分页
<script src="http://www.jq22.com/demo/jqPaginator-master201703111100/js/jqPaginator.js"></script>
//样式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">将分页按钮放到合适的位置，插入到index.html中。
<!-- 分页部分 --><ul class="pagination" id="pagination1"></ul><!-- 分页部分 -->后台需要传进来一些参数，根据api接口提供的信息值，在前台传递。API图例：
1. 获取任务列表信息URL：/getTaskList?limit=8&page=1&state=0limit:每一页展示的数量(默认8条)page:当前展示第几页state:任务状态(0全部[默认] 1未完成 2已完成)METHOD：GET RESULT：{code:0, 返回数据的状态码 0->正常 1->非正常(无匹配信息)msg:'', 数据状态的描述信息limit:8, 每页展示数量page:1, 当前页码pageNum:10, 总页数total:98, 总数据量list:[ {id:1, 编号task:'xxx', 任务信息state:1, 任务状态 1未完成 2已完成time:'2019-06-15 04:39:00' 预完成时间complete:'2019-06-15 04:39:00' 真实完成时间},...]}关于jqPaginator介绍参数使用说明
参数
| 参数 | 默认值 | 说明 |
|---|---|---|
| totalPages | 0 | 设置分页的总页数 |
| totalCounts | 0 | 设置分页的总条目数 |
| pageSize | 0 | 设置每一页的条目数 注意：要么设置totalPages，要么设置totalCounts + pageSize，否则报错；设置了totalCounts和pageSize后，会自动计算出totalPages。 |
| currentPage | 1 | 设置当前的页码 |
| visiblePages | 7 | 设置最多显示的页码数（例如有100也，当前第1页，则显示1 - 7页） |
| disableClass | 'disabled' | 设置首页，上一页，下一页，末页的"禁用状态"样式 |
| activeClass | 'active' | 设置当前页码样式 |
| first | (无) | 设置"首页"的贬迟尘濒结构 |
| prev | (无) | 设置"上一页"的贬迟尘濒结构 |
| next | (无) | 设置"下一页"的贬迟尘濒结构 |
| last | (无) | 设置"末页"的贬迟尘濒结构 |
| page | (无) | 设置页码的贬迟尘濒结构,其中可以使用{{page}}代表当前页，{{totalPages}}代表总页数，{{totalCounts}}代表总条目数（例如：上面的"极简风格"的顿别尘辞，就是使用了调调占位符皑皑，并将惫颈蝉颈产濒别笔补驳别蝉设为1实现的。） |
| wrapper | (无) | 分页结构的Html包裹，例如：<div class="your class"></div>，一般不会用到 |
| onPageChange | (无) | 回调函数，当换页时触发（包括初始化第一页的时候），会传入"目标页"的页码 |
下一步就开始操作index.js文件，给ul#pagination1传入需要的页码值、分页数量等信息，根据项目需要设置对应的参数修改就可以了。
首先要从后台数据提供的信息中，拿到总页数、每页的数量；请求成功之后给分页功能开始传新值渲染到前台HTML中，最后对按钮触发事件onPageChange增加一个函数。：其中num是页面点击对应的页码号（1、2、3……）。将点击的页码号再次传入接口，将新的数据渲染到页面的TABLE表格中展示即可。
//定义两个参数
var page=1;//当前页码
var limit=4;
//封装一个函数 来获取数据
function getList(){//通过JQ 封装ajax去获取新的数据$.ajax({url:'/getTaskList',//接口路径data:{//给后台传送的数据limit:limit,//数据条数page:page,},success:function(data){//该函数 会在请求成功之后执行 data是后台传过来的数据$.jqPaginator('#pagination1', {totalPages:data.pageNum,visiblePages: 4,currentPage: page,onPageChange: function (num) {$.ajax({url:'/getTaskList',//接口路径data:{//给后台传送的数据limit:limit,//数据条数page:num,},success:function(data){bindHTML(data);//获取到数据之后 再去把数据展示到页面}})}});}})
}把请求到的数据展示到TABLE页面上；循环获取到的数据，拼接成对应的结构字符串；然后把这个结构字符串，插入到页面上自定义的表格内容，bindHTML(data)方法。
function bindHTML(data)
{var {}=data;//data是个后台传进来的对象var{code,list}=data;//data是后台传进来的对象console.log(code,list);if(code==1){//code==1代表请求失败alert('请求失败');return;//打断函数执行}var str='';//该字符串用来拼接需要的结构list.map(function(item,index){//使用map 循环 list 数组//item 数组中的项 index 代表对应的索引var {id,task,state,time,complete}=item;//str = str +str+=` <tr><td>${id}</td><td>${task}</td><td>${state==1?"未完成":"已完成"}</td><td>${time}</td><td><button type="button" class="btn btn-danger" data_id=${id}>删除</button>${state==1?'<button type="button" data_id='+id+' class="btn btn-success successBtn">完成</button>':''}</td></td></tr>`;})最终效果图：
这篇关于基于jqPaginator分页插件Boostrap分页样式TABLE表格操作的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
