分页功能的实现

 

 

 

/***
 *   options: { ck: true(是否显示全选), isNo: true（是否序号）, heads: [](标题设置), Fn: null（获取数据回调方法） },
 *   Dom数据填充格式如
        <tr>
           <td class="no"></td>
           <td class="ck">
               <input type="checkbox" value="1" id="aa" class="myCheck" />
               <label for="aa"></label>
           </td>
           <td>SIYB创业培训2008级</td>
           <td>就业培训</td>
           <td>2018-07-08</td>
           <td>张三</td>
           <td>审核中</td>
           <td>修改/删除</td>
       </tr>
 **/
(function ($win, $d) {
    var userDatatable = {
        //页面
        pageIndex: 1,
        pageSize: 0,
        //配置参数
        options: { ck: true, isNo: true, heads: [], Fn: null },
        //初始化
        load: function (option) {
            if (option.ck != undefined) {
                this.options.ck = option.ck;
            }
            if (option.isNo != undefined) {
                this.options.isNo = option.isNo;
            }
            if (option.heads != undefined) {
                this.options.heads = option.heads;
            }
            if (option.callback != undefined && option.callback != null) {
                this.options.Fn = option.callback;
            }
            //添加标题
            this.addHeads();
            //添加分页器
            this.addPagination();
            //获取数据
            this.pagination();
        },
        addHeads: function () {
            var hredhtml = '<tr>';
            //添加表头
            if (this.options.heads.length > 0) {
                if (this.options.isNo) {
                    hredhtml += '<th class="no"></th>';
                }
                if (this.options.ck) {
                    hredhtml += '  <th class="ck">';
                    hredhtml += '        <input type="checkbox" value="" id="check" class="myCheck" />';
                    hredhtml += '        <label for="check"></label>';
                    hredhtml += '    </th>';
                }
                for (var i = 0; i < this.options.heads.length; i++) {
                    hredhtml += '<th class="field">' + this.options.heads[i] + '</th>';
                }
                $(".user-datatables .hred-data").html("");
                $(".user-datatables .hred-data").html(hredhtml + " </tr>");
                //选中
                $(".user-datatables #check").click(function () {
                    $(".user-datatables tbody .myCheck").prop("checked", $(this).is(':checked'));
                    //console.log(userDatatable.getCkedItems());
                });
            }
        },
        addPagination: function () {
            var paginhtml = '<div class="utab-col">';
            paginhtml += '第 <span class="pageIndex">1</span> 页/共 <span class="pageSize">0</span> 页&nbsp;&nbsp;&nbsp;全部数据 <span class="dataCount">0</span> 条';
            paginhtml += '</div>';
            paginhtml += '<div class="utab-col">';
            paginhtml += '    <button class="p-butn" value="1">首页</button>';
            paginhtml += '    <button class="p-butn" value="2">上一页</button>';
            paginhtml += '    <button class="p-butn" value="3">下一页</button>';
            paginhtml += '   <button class="p-butn" value="4">末页</button>&nbsp;&nbsp;';
            paginhtml += '    <span>第&nbsp;</span><input type="text" value="" class="pageNumber" maxlength="9"  />&nbsp;<span>页&nbsp;&nbsp;</span><button class="p-butn" value="5">跳转</button>';
            paginhtml += '</div>';
            $(".user-datatable-footer").html(paginhtml);
            //分页
            $(".user-datatable-footer .p-butn").click(function () {
                switch ($(this).attr("value")) {
                    case "1":
                        //如果已经是第一页了就不做处理
                        if (userDatatable.pageIndex == 1) {
                            return;
                        }
                        userDatatable.pageIndex = 1;
                        userDatatable.pagination();
                        break;
                    case "2":
                        if (userDatatable.pageIndex == 1) {
                            return;
                        }
                        userDatatable.pageIndex--;
                        if (userDatatable.pageIndex > 0) {
                            userDatatable.pagination();
                        }
                        break;
                    case "3":
                        if (userDatatable.pageIndex == userDatatable.pageSize || userDatatable.pageSize == 0) {
                            return;
                        }
                        userDatatable.pageIndex++;
                        userDatatable.pagination();
                        break;
                    case "4":
                        //如果已经是最后一页就不做处理
                        if (userDatatable.pageIndex == userDatatable.pageSize) {
                            return;
                        }
                        userDatatable.pageIndex = userDatatable.pageSize;
                        userDatatable.pagination();
                        break;
                    case "5":
                        var no = $(".user-datatable-footer .pageNumber").val();
                        if (no == "" || no == undefined) {
                            //alert("页码不能为空!");
                            return;
                        }
                        if (!/^\d+$/.test(no)) {
                            alert("您输入的页码有误!");
                            return;
                        }
                        if (parseInt(no) > userDatatable.pageSize || parseInt(no) == 0 || parseInt(no) < 0) {
                            alert("您输入的页码有误!");
                            return;
                        }
                        userDatatable.pageIndex = parseInt(no);
                        userDatatable.pagination();
                        break;
                    default:

                }
            })

            $(".user-datatable-footer .pageNumber").keyup(function () {
                if (!/^\d+$/.test($(this).val())){ 
                    $(this).val("");
                }
            });
        },
        getCkedItems: function () {
            var ids = "";
            $.each($('.user-datatables .datalist .myCheck:checkbox'), function () {
                if (this.checked) {
                    ids += $(this).val() + ",";
                }
            });
            return ids;
        },
        pagination: function () {
            this.options.Fn();
        },
        setData: function (html) {
            $(".user-datatables .datalist").html("");
            $(".user-datatables .datalist").html(html);
            //若果当前没有数据自动获取上一页
            var plinge = $(".datalist tr").length;
            if (plinge == 0 && userDatatable.pageIndex > 1) {
                userDatatable.pageIndex--;
                userDatatable.pagination();
            }
        },
        setPageing: function (total, linage) {
            $(".user-datatable-footer .dataCount").html(total);
            this.pageSize = parseInt(Math.ceil(total * 1.0 / parseInt(linage)));
            $(".user-datatable-footer .pageSize").html(this.pageSize);
            $(".user-datatable-footer .pageIndex").html(this.pageIndex);
        }
    }
    window.userDatatable = userDatatable;
})(window, document);