jQuery分页插件

分页插件下载地址和使用案例：http://www.jq22.com/yanshi5697

效果图：

缺点：插件没有自带每页显示多少条的设置，如果有此需求可自己设置input下拉框 然后把下拉框中选中的参数传入插件中即可

html页面：

 <div style="text-align:center">
      <div class="M-Pages m-style" style="margin: 10px auto;" ></div>
 </div>

js代码：

function getParamList() {
        var paramTypeId = getRequest("paramTypeId");
        var idSite = getRequest("idSite");//站点id
        $("#siteId").val(idSite);
        $("#paramTypeId").val(paramTypeId);
        var PrmPageNo = $("#PrmPageNo").val();
        var paramCode = $("#searchParam").val();
        var PrmItemsPerPage = $("#PrmItemsPerPage").val();

        layer.load(2,{
            shade:[0.5,'#fff']
        });

        $.ajax({
            url: baseUrl+'/sysParam/paramList.thtml',
            type: 'post',
            data:{
                "paramTypeId":paramTypeId,
                "PrmItemsPerPage":PrmItemsPerPage,
                "PrmPageNo":PrmPageNo,
                "siteId":idSite,
                "paramCode":paramCode,
            },
            success: function(data) {
                layer.closeAll('loading');
                if (data.code=='0') {
                    var paramList = data.paramList;
                    //先清空数据
                    $("#tbody").html("");
                    for(var i=0;i<paramList.length;i++){
                        var param = paramList[i];
                        var OTr = $("<tr></tr>");
                        //将tr放在tbody里面
                        $("#tbody").append(OTr);
                        var otdBox = $("<td class="column" style="150px;text-align:left"></td>")
                        otdBox.html("<div class="col s12  m6">
" +
                            "<div class="checkbox ">
" +
                            "<input type="checkbox" id="a"+i+"" name="ids"  class="ng-pristine ng-untouched ng-valid ng-empty"  value=""+param.paramId+"">
" +
                            "<label for="a"+i+"" class="ng-binding"></label>
" +
                            "</div> 
" +
                            "</div>   ")
                        var Otd1 = $("<td class="column"></td>");
                        Otd1.html(param.paramCode);
                        var Otd2 = $("<td class="column"></td>");
                        Otd2.html(param.paramValue);
                        var Otd3 = $("<td class="column"></td>");
                        Otd3.html(param.createTime.substring(0,10));
                        //将td放在tr下面
                        OTr.html(otdBox)
                        OTr.append(Otd1);
                        OTr.append(Otd2);
                        OTr.append(Otd3);
                    }
                    //设置分页数据

                    var page = data.page;
                    var current = page.pageNo;

                    var total = page.totalPage;
                    $('.M-Pages').pagination({
                        pageCount:total,//总页数
                        current:current,
                        jump: true,//是否开启跳转到指定页数，值为boolean类型
                        coping: true,//是否开启首页和末页，值为boolean
                        homePage: '首页',
                        endPage: '末页',
                        prevContent: '上页',
                        nextContent: '下页',
                        callback: function (api) {//回调函数
                            $("#PrmPageNo").val(api.getCurrent());
                            getParamList();

                        }
                    });

                }else{
                    $("#tbody").html("<div class='pk-emptyDataTable' style='text-align: center'>此报表沒有数据。</div>");

                    $('.dataTableFeatures').hide();
                }
            }
        });
    }