pagination表格table分页

本文介绍了一种基于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();
                    }
                });
            }

 

### 不依赖 `el-pagination` 组件实现表格分页 为了实现在不使用 `el-pagination` 的情况下完成表格分页的功能,可以采用手动管理数据切片的方式。通过监听页面变化事件来动态更新显示的数据片段。 #### 方法概述 创建一个自定义的分页逻辑,在 Vue 中维护当前页码和每页条目数的状态变量。当这些状态发生变化时,重新计算并展示对应范围内的记录集合[^1]。 #### 数据准备与初始化 在组件内部声明两个响应式的属性用于存储总项数以及每页要显示的最大项目数量: ```javascript data() { return { currentPage: 1, // 当前页 pageSize: 5, // 每页大小 tableData: [],// 表格原始数据源 filteredTableData: [] // 过滤后的数据显示给用户的最终列表 } } ``` #### 计算属性处理分页逻辑 利用 Vue 提供的 computed 属性来进行懒加载运算,基于上述参数筛选出应该呈现的具体子集: ```javascript computed:{ paginatedData(){ const start = this.pageSize * (this.currentPage - 1); const end = start + this.pageSize; return this.tableData.slice(start,end); }, }, ``` 此部分代码实现了根据设定好的条件自动截取相应位置上的数组元素作为实际渲染的内容[^2]。 #### 页面切换控制 提供按钮或其他交互方式让用户能够改变 `currentPage` 值从而触发视图刷新操作。这里可以通过简单的点击事件处理器来调整这个值,并确保其始终处于有效范围内(即不超过最大可能页数)。 ```html <button @click="prevPage">上一页</button> <span>{{ currentPage }}</span>/<span>{{ totalPages }}</span> <button @click="nextPage">下一页</button> <!-- ... --> methods: { nextPage () { if ((this.currentPage*this.pageSize) < this.totalItems){ this.currentPage += 1; } }, prevPage (){ if(this.currentPage>1){ this.currentPage -= 1; } } } ``` 以上就是一种不需要借助额外插件就能轻松达成简单分页效果的技术方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值