基于jqPaginator分页插件Boostrap分页样式TABLE表格操作

本文主要是介绍基于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>`;})

最终效果图：