pagination表格table分页

最新推荐文章于 2024-08-01 11:00:47 发布

原创最新推荐文章于 2024-08-01 11:00:47 发布 · 3.7k 阅读

0 ·

CC 4.0 BY-SA版权

MVC 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种基于jQuery的分页插件实现方法，详细展示了如何通过HTML、CSS及JavaScript来构建一个完整的分页功能，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页插件效果

1首先引用CSS和JS

       <link href="~/.../css/jquery.pagination.css" rel="stylesheet" />
       <script src="~/.../js/jquery.pagination.min.js" </script>

2HTML代码

     <div class="calendarInfo">
            @*表格*@
            <table id="example" class="display f-fs14" cellspacing="0">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>日程名称</th>
                        <th>日程内容</th>
                        <th>时间</th>
                        <th>地点</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            @*分页插件*@
            <div class='clearfix mt-15 f-fs14'>
                <div id="paginationText" class="f-inblock uc-color-grey"></div>
                <div id="pagination" class="page fr"></div>
            </div>
        </div>

JS 代码，如果点击第二页，则current为2，写方法赋值给table即可，table序号通过代码设置。

// 分页
var paginationnum = 0;
    $("#pagination").pagination({   //分布总数量，必须参数 
        currentPage: 1,
       
        isShow: false,
        count: 5,                    //行数
        prevPageText: "<i class=\"icon-font icon-left\"></i>",
        nextPageText: "<i class=\"icon-font icon-right\"></i>",
        callback: function (current) {
            current = current - 1;
            $("#example tr:not(:first)").html("");
            //current是点击的页数
            GetTableData(startDate, endDate, current);

        },
      totalPage: paginationnum;
    });

//访问数据，并给table赋值
function GetTableData(startDate, endDate,  current) {
    current = current;
    var matterHtml = '';
    var jsons;
    $.ajax({
        async: false,
        type: 'POST',
        url: ' /Products/BST_Schedule/GetWeekDateLists?beginTime=' + startDate + '&endTime=' + endDate + ' ',
        data: {},
        dataType: 'json',
        error: function (result) {
        },
        success: function (result) {
            jsons = JSON.parse(result.scheduleList);
            document.getElementById("paginationText").innerHTML = ' 共 ' + Math.ceil(jsons.length / 5) + '页，每页5条数据';
        }
    });
    //得到数据给table赋值
    for (var i = current * 5; i < ((current * 5 + 5) > jsons.length ? jsons.length : current * 5 + 5) ; i++) {
        var num = i + 1;
        scheduleID = jsons[i].ID;
        matterHtml += '<tr>'
            + '<td>' + num + '</td>'
            + '<td>' + jsons[i].Event + '</td>'
            + '<td>' + jsons[i].Remark + '</td>'
            + '<td>' + jsons[i].BeginTime + '-' + jsons[i].EndTime + '</td>'
            + '<td>' + jsons[i].Address + '</td>'
            + '</tr>';
    }

    $('#example tbody').html(matterHtml);
    if (date != "1") {
        $('.personalSchedule_title').html(date);
    }

    $("#pagination").pagination({   //分布总数量，必须参数 
        currentPage: current+1,
        isShow: false,
        count: 5,
        prevPageText: "<i class=\"icon-font icon-left\"></i>",
        nextPageText: "<i class=\"icon-font icon-right\"></i>",
        callback: function (current) {
            current = current - 1;
            $("#example tr:not(:first)").html("");
            GetTableData(startDate, endDate, date, current);

        },
        totalPage: paginationnum
    });
}

JS也可以这样写

 getWeekList(pageindex);
                // 分页
                if (pagenum > 1) {
                    $("#pagination").pagination({
                        currentPage: pageindex,
                        totalPage: pagenum,
                        isShow: false,
                        prevPageText: "<i class=\"icon-font icon-left\"></i>",
                        nextPageText: "<i class=\"icon-font icon-right\"></i>",
                        callback: function (current) {
                            pageindex = current;
                            getWeekList(pageindex);
                        }
                    });
                }
 /*获取数据填充给表格*/
            function getWeekList(pageindex) {
                var personalScheduleHtml = '';
                $.ajax({
                    async: false,
                    type: 'POST',
                    url: '@Url.Action("GetWeekDateList", "Schedule")',
                    data: {
                        "startDate": "@ViewBag.startDate",
                        "endDate": "@ViewBag.endDate",
                        "schoolID": "@ViewBag.schoolID",
                        "pageindex": pageindex
                    },
                        dataType: 'json',
                        error: function (result) {
                    },
                    success: function (result) {
                        pagenum = result.pageCount;
                        var json = JSON.parse(result.pageCutList);

                        for (var i = 0; i < json.length; i++) {
                            var num = i + 1;
                            personalScheduleHtml += '<tr>'
                                + '<td>' + json[i].Index+ '</td>'
                                + '<td>' + json[i].WbeginTime + ' — ' + json[i].WendTime + '</td>'
                                + '<td>' + json[i].WallNum + ' </td>'
                                + '<td>' + json[i].WfinishNum  + '</td>'
                                + '<td>' + json[i].WunfinishNum + '</td>'
                                + '<td> <a href="javascript:;"  title="添加日程" onclick="layer_add(\'' + json[i].WbeginTime + '\',\'' + json[i].WendTime + '\')"><i class="icon-font icon-add-line"></i></a>  &emsp;  <a href="javascript:;" title="查看日程" onclick="layer_list(\'' + json[i].WbeginTime + '\',\'' + json[i].WendTime + '\')"><i class="icon-font icon-browse"></i></a><td>'
                                + '</tr>';
                        }
                        $('#example tbody').html(personalScheduleHtml);

                        document.getElementById("paginationtext").innerHTML = ' 共 ' + pagenum + '页，每页6条数据';
                        vm.weeks = json;
                        $("#weekList").show();
                    }
                });
            }