分页dome

最新推荐文章于 2022-06-13 18:45:05 发布

weixin_39238520

最新推荐文章于 2022-06-13 18:45:05 发布

阅读量87

点赞数

分类专栏：学习专用仅供参考笔记

本文链接：https://blog.csdn.net/weixin_39238520/article/details/93068393

版权

学习专用仅供参考同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

笔记

21 篇文章 0 订阅

订阅专栏

页面

<body>
	//页面数据操作
    <select name="" id="sel">
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
    </select>
    <select name="" id="page">
        <option value="1">第一页</option>
        <option value="2">第二页</option>
    </select>
    <span id="sum">一共30条数据</span>
    <span id="pageNum">一共3页</span>
    
    <!-- 页面数据 -->
    <table border="1" id="tab">
        <thead>
            <tr>
                <th>good</th>
                <th>no</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>good</td>
                <td>no</td>
            </tr>
        </tbody>
    </table>
</body>

//需要先引入JQ
$(function () {
            //分页的数据
            var arrdata = [
                { "id": 0, "name": "a","妈耶":"good" }, { "id": 1, "name": "b" }, { "id": 2, "name": "c" }, { "id": 3, "name": "d" }, { "id": 4, "name": "e" }, { "id": 5, "name": "f" }, { "id": 6, "name": "g" }, { "id": 7, "name": "h" }, { "id": 8, "name": "i" }, { "id": 9, "name": "j" }, { "id": 10, "name": "k" }, { "id": 11, "name": "l" }, { "id": 12, "name": "m" }, { "id": 13, "name": "n" }, { "id": 14, "name": "o" }, { "id": 15, "name": "p" },{ "id": 0, "name": "a" }, { "id": 1, "name": "b" }, { "id": 2, "name": "c" }, { "id": 3, "name": "d" }, { "id": 4, "name": "e" }, { "id": 5, "name": "f" }, { "id": 6, "name": "g" }, { "id": 7, "name": "h" }, { "id": 8, "name": "i" }, { "id": 9, "name": "j" }, { "id": 10, "name": "k" }, { "id": 11, "name": "l" }, { "id": 12, "name": "m" }, { "id": 13, "name": "n" }, { "id": 14, "name": "o" }, { "id": 15, "name": "p" },{ "id": 0, "name": "a" }, { "id": 1, "name": "b" }, { "id": 2, "name": "c" }, { "id": 3, "name": "d" }, { "id": 4, "name": "e" }, { "id": 5, "name": "f" }, { "id": 6, "name": "g" }, { "id": 7, "name": "h" }, { "id": 8, "name": "i" }, { "id": 9, "name": "j" }, { "id": 10, "name": "k" }, { "id": 11, "name": "l" }, { "id": 12, "name": "m" }, { "id": 13, "name": "n" }, { "id": 14, "name": "o" }, { "id": 15, "name": "p" }
            ];
            $("#tab>thead").css("background", "red");
            //页标题
            $("#tab>thead>tr").empty();
            var str = "";
            for (var key in arrdata[0]) {
                str += `<th>${key}</th>`;
            }
            $("#tab>thead>tr").append(str);

            //初始化表格
            onePage(1,10);
            sumPage(arrdata.length,10);
            //选择每页条数
            $("#sel").change(function () {
                var count=$("#sel").val();
                var indexPage=$("#page").val();
                onePage(indexPage,count);
                sumPage(arrdata.length,count);
            });
            //选择第几页
            $("#page").change(function(){
                var count=$("#sel").val();
                var indexPage=$("#page").val();
                onePage(indexPage,count);
            });

            $("#sum").html(`一共${arrdata.length}条数据`);
            //一页
            function onePage(indexPage, count) {
                $("#tab>tbody").empty();
                var stri = "";
                for (var i = (indexPage -1)*count; i < indexPage*count; i++) {
                    stri += `<tr>`;
                    for (var key in arrdata[i]) {
                        stri += `<td>${arrdata[i][key]}</td>`;
                    }
                    stri += `</tr>`;
                }
                $("#tab>tbody").append(stri);
            }
            //一共多少页和第几页
            function sumPage(sum,count){
                var pageNum=Math.ceil(sum/count);
                $("#pageNum").html(`一共${pageNum}页`);
                //渲染每条的下拉框
                $("#page").empty();
                var str="";//下拉的第几个option
                for(var i=0;i<pageNum;i++){
                    str+=`<option value="${i+1}">第${i+1}页</option>`;
                }
                $("#page").append(str);
            }   
            
        });

总结：
渲染一个方法，页面所有的点击事件一个方法会比较好，如果不考虑效率的话

weixin_39238520

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分页dome

页面<body> //页面数据操作 <select name="" id="sel"> <option value="10">10条/页</option> <option value="20">20条/页</option> </select> <se...
复制链接

扫一扫

专栏目录