基于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=0
    limit:每一页展示的数量(默认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>`;

    })

最终效果图：