table展示数据，数据分页查询，底部导航生成

最新推荐文章于 2024-02-25 20:50:31 发布
最新推荐文章于 2024-02-25 20:50:31 发布
阅读量927 收藏
点赞数
分类专栏： html 文章标签： html JQuery 分页
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/hjtlovelife/article/details/52402708
版权
 XML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
$(function () {
    dynGenPagingDataAndList(dataInfos, allRecords, pageSize, curPage);
});

/* 动态生成数据记录 和分页列表导航 * /
function dynGenPagingDataAndList(dataInfosParam, allRecordsParam, pageSizeParam, curPageParam) {
    var jsonObjectArray = eval(dataInfosParam);
    
    if(jsonObjectArray.length == 0) {
            $( "#favoriteInfoTbody").html( "");
        $( "#favoriteInfoTbody").append(' <b style= "font-size: 14px;" >暂无收藏报表数据 </b>');
        return;
    }
    
    curPage = curPageParam;
    pageSize = pageSizeParam;
    allRecords = allRecordsParam;
    
    var recordSizeParam = jsonObjectArray.length;
    
    serialNumber = (curPageParam - 1) * pageSizeParam + 1;
    
    dynGenDataRecord(jsonObjectArray);
    
    getDynGenPagingList('pagingNavigation', 'myfavorite', '?{uriPath}', allRecordsParam, pageSizeParam, curPageParam, recordSizeParam);
    
    tableChangeColor();
}

/* 动态生成数据记录 * /
function dynGenDataRecord(jsonObjectArrayParam) {
    var shareTemplate;
    
    var dynGenPagingInfoStr =  "";
    
    var myFavoriteInfoTr = ' <tr class= "table-tr-content" ><td>#serialNumber </td><td><a style= "text-decoration: underline;"  onclick= "javascript:openDashboard(\'#menu_action\')" >#menu_name </a></td><td>#app_type </td><td>#source_type </td><td>#source_user </td><td>#favorite_date </td><td>#shareTemplate <a style= "text-decoration: underline;"  onclick= "javascript:cleFavoriteReport(\'#menu_id\')" >删除 </a></td></tr>';
    
    if(sharePriority == '0') {
        shareTemplate =  "";
  }
    else {
        shareTemplate = ' <a name= "shareOperate"  style= "text-decoration: underline;"  onclick= "javascript:bindingShareOperate(\'#menu_id\', \'#menu_name\');" >共享 </a>  ';
    }
    
    for(var i = 0; i  < jsonObjectArrayParam.length; i++) {          
        dynGenPagingInfoStr += myFavoriteInfoTr.replace( /#shareTemplate /g, shareTemplate).
              replace( /#serialNumber /g, serialNumber++).
              replace( /#menu_action /g, jsonObjectArrayParam[i].MENU_ACTION). 
                replace( /#menu_name /g, jsonObjectArrayParam[i].MENU_NAME).  
                replace( /#menu_id /g, jsonObjectArrayParam[i].MENU_ID).
                replace( /#app_type /g, jsonObjectArrayParam[i].APP_TYPE).
                replace( /#source_type /g, jsonObjectArrayParam[i].SOURCE_TYPE).
                replace( /#source_user /g, jsonObjectArrayParam[i].SOURCE_USER).
                replace( /#favorite_date /g, jsonObjectArrayParam[i].FAVORITE_DATE);          
    }
    
    $( "#favoriteInfoTbody").html( "");
    $( "#favoriteInfoTbody").append(dynGenPagingInfoStr);
}
==========================================================================================================================================
pagingNavigation.css
 XML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.a_selected {
   margin: 0px 1px 0px 1px;
   padding: 0px 5px 0px 5px;
}

.a_no_select {
   margin: 0px 1px 0px 1px;
   padding: 0px 8px 0px 8px;
   border: 1px solid #BEBEBE;
   background: #E0E0E0;
}

.a_no_select:hover {
   color: #fff;
   cursor: pointer;
   background-color: #cc0000;
   text-decoration: none;
}

.div_left {
   float: left;
   padding-left: 10px;
   font-size: 14px;
}

.input_button {
   width: 45px;
   font-size: 14px;
   text-align: center;
}

==========================================================================================================================================
tableData.css
 XML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
   table {
      width: 100%;
      padding-left: 5px;
      font-size: 14px;
      border-collapse: collapse;
   }
   
   table td {
      width: 15%;
      height: 45px;
      border: 1px solid #aaa;
   }
   
   input {
      width: 30px;
      font-size: 14px;
      text-align: center;
   }
   
   a {
      text-align: left;
      font-size: 14px;
      font-weight: bold;
      color: #3b3b3b;
   }
   
   a:hover {
      color: #e84242;
      cursor: pointer;
   }
   
   
   .div_content {
      padding-left: 6%;
      height: 50px;
      line-height: 50px;
   }

    .table-tr-title{
        height: 26px;
        font-size: 14px;
        text-align: center;
    }
    
    .table-tr-content{
        height: 18px;
        background: #FFFFFF;
        text-align: center;
        font-size: 14px;
    }
    
    .normalEvenTD{
        background: #DFD8D8;
    }
    
    .normalOddTD{
        background: #FFFFFF;
    }
    
    .hoverTD{
        background-color: #eafcd5;
        height: 18px;
        text-align: center;
        font-size: 14px;
    }
    
    .trSelected{
        background-color: #51b2f6;
        height: 18px;
        text-align: center;
        font-size: 14px;
    } 

==========================================================================================================================================
pagingNavigation.js
 XML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
     /* 动态生成分页列表  * /    
    function getDynGenPagingList(pagingNavigationId, operateType, uriPath, allRecordsParam, pageSizeParam, curPageParam, recordSizeParam) {
         /* 分页码显示窗口大小 * /
        var pagingCodeShowSize = 6;
        var dynGenPagingInfoStr =  "";
         /* 总页数 * /
        var allPages = Math.ceil(allRecordsParam /pageSizeParam);
         /* 上一页 * /
        var prePage = parseInt(curPageParam) - 1;
         /* 下一页 * /
        var nextPage = parseInt(curPageParam) + 1;
         /* 尾页 * /
        var lastPage = allPages;
         /* 当前页开始记录编号 * /
        var curPageStartRecord = prePage * pageSizeParam + 1;
         /* 当前页结束记录编号 * /
        var curPageEndRecord = curPageStartRecord + recordSizeParam - 1;
        curPageEndRecord = curPageEndRecord  > allRecordsParam ? allRecordsParam : curPageEndRecord;
         /* 从第几页开始显示分页信息 * /
        var pagingCodeBegin = 0;
         /* 分页信息显示到第几页  * /
        var pagingCodeEnd = 0;
        var pagingOperationTemplate = ' <a class= "a_no_select"  onclick= "javascript:clicknav(\'' + uriPath + '?action=asynRequest&type=' + operateType + '&curPage=#curPage&pageSize=' 
                 + pageSizeParam + '\') ">#value</a>';
        var noOperationTemplate = ' <a class= "a_no_select" >#value </a>';
        
        dynGenPagingInfoStr += ' <div class= "div_left" >当前第#curPage /#allPages页，第#startRecord-#endRecord /#allRecords条记录 </div>'.
            replace( /#curPage /g, curPageParam).replace( /#allPages /g, allPages).
            replace( /#startRecord /g, curPageStartRecord).replace( /#endRecord /g, curPageEndRecord).
            replace( /#allRecords /g, allRecordsParam);
        
        dynGenPagingInfoStr += ' <div class= "div_left"  style= "display:inline-block;" >';
         /* 显示首页、上一页 * /
        if(allPages  > 1) {
            dynGenPagingInfoStr += pagingOperationTemplate.replace( /#curPage /g, 1).
                replace( /#value /g,  "<<");
            if(prePage  > 0) {
                dynGenPagingInfoStr += pagingOperationTemplate.replace( /#curPage /g, prePage).
                replace( /#value /g,  "<");
            }
            else {
                dynGenPagingInfoStr += noOperationTemplate.replace( /#value /g,  "<");
            }
        }
        
         /* =======================计算开始、结束分页码======================== * /
        pagingCodeEnd = parseInt(curPageParam) + Math.floor(pagingCodeShowSize /2) - 1;
        if(pagingCodeEnd  > allPages) {
            pagingCodeEnd = allPages;
        }
        
        pagingCodeBegin = curPageParam - Math.floor(pagingCodeShowSize /2) + 1;
        if(pagingCodeBegin  <  1 ) {
            pagingCodeBegin =   1 ;
        }
        /* ======================= 计算开始、结束分页码========================  */
        
        /* ============================ 显示分页码===========================  */
        if(pagingCodeBegin > 1) {
            dynGenPagingInfoStr +=  ' <a class= "a_selected" >... </a>';
        }
        
        for(var i = pagingCodeBegin; i  <= pagingCodeEnd; i++) {
            if(curPageParam != i) {
                dynGenPagingInfoStr += pagingOperationTemplate.
                    replace( /#curPage /g, i).replace( /#value /g, i);
            }
            else {
                dynGenPagingInfoStr += ' <a class= "a_selected" ><b style= "color: red;" >#pagingCode </b></a>'.replace( /#pagingCode /g, i);
            }
        }
        
        if(pagingCodeEnd  < allPages) {
            dynGenPagingInfoStr +=  ' <a class= "a_selected" >... </a>';
        }
         /* ============================显示分页码=========================== * /
        
         /* 显示末页、下一页 * /
        if(curPageParam  <= allPages) {      
            if(nextPage  <= allPages) {
                dynGenPagingInfoStr += pagingOperationTemplate.replace( /#curPage /g, nextPage).
                replace( /#value /g,  ">");
            }
            else {
                dynGenPagingInfoStr += noOperationTemplate.replace( /#value /g,  ">");
            }
            
            dynGenPagingInfoStr += pagingOperationTemplate.replace( /#curPage /g, lastPage).
                replace( /#value /g,  ">>");
        }
        dynGenPagingInfoStr += ' </div>';
        
        if(allPages  > 1) {
            dynGenPagingInfoStr += (' <div class= "div_left" >到第 <input id= "skipToPage"  value= "#curPage" />页'.replace( /#curPage /g, curPageParam)
            + ' <input class= "input_button"  type= "button"  onclick= "javascript:skipToNPage(\'' + uriPath + '?action=asynRequest&type=' + operateType + '&curPage=#curPage&pageSize=#pageSize, #allPages\')"  value= "确定" /></div>').replace( /#pageSize /g, pageSizeParam).
            replace( /#allPages /g, allPages);
        }
        
        dynGenPagingInfoStr += (' <div class= "div_left" >当页显示 <input id= "pageSize"  value= "#pageSizeValue"  onchange= "javascript:changePageSize(\'' + uriPath + '?action=asynRequest&type=' + operateType + '&curPage=#curPage&pageSize=#pageSize\')" />条记录 </div>').replace( /#curPage /g, curPageParam).
                replace( /#pageSizeValue /g, pageSizeParam);
        
        var startJinHao = pagingNavigationId.indexOf( "#");
        if(startJinHao == -1){
            pagingNavigationId =  "#" + pagingNavigationId;
        }
        
        $(pagingNavigationId).html( "");
        $(pagingNavigationId).append(dynGenPagingInfoStr);
    }
    
     /* 跳转到某页 * /
    function skipToNPage(pagingUrlParam, allPagesParam) {
        var skipToPage = parseInt($( "#skipToPage").val());
        if(skipToPage  <  1  || skipToPage > allPagesParam) {
            alert('请输入1-' + allPagesParam + '的数字');
            return;
        }
        
        clicknav(pagingUrlParam.replace( /#curPage /g, skipToPage));
    }
    
     /* 改变显示记录数 * /
    function changePageSize(pagingUrlParam) {
        if(!$.isNumeric($( "#pageSize").val())) {
            alert('请输入数字');
            return;
        }
        
        var pageSize = parseInt($( "#pageSize").val());
        if(pageSize  <= 0) {
            alert( "请输入大于0的数字");
            return;
        }
        
        clicknav(pagingUrlParam.replace( /#pageSize /g, pageSize));
    }   
    
     /* 分页操作 * /
    function clicknav(pagingUrlParam) {
        $.getJSON(pagingUrlParam, 
            function (jsonObject){
                dynGenPagingDataAndList(jsonObject.dataInfos, jsonObject.allRecords, jsonObject.pageSize, jsonObject.curPage);
        });
    }

==========================================================================================================================================
tableData.js
 XML Code 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function tableChangeColor() {
    var dtSelector =  ".list";
    var tbList = $(dtSelector);
    
    tbList.each(function() {
        var self = this;
         // 从标头行下一行开始的奇数行，行数：（1，3，5...）
        $( "tr:odd", $(self)).addClass( "normalEvenTD"); 
         // 从标头行下一行开始的偶数行，行数：（2，4，6...）
        $( "tr:even", $(self)).addClass( "normalOddTD"); 
        
         // 鼠标经过的行变色
        $( "tr:not(:first)", $(self)).hover(
            function () { $(this).addClass('hoverTD');$(this).removeClass('table-td-content'); },
            function () { $(this).removeClass('hoverTD');$(this).addClass('table-td-content'); }
        );
    
         // 选择行变色
        $( "tr", $(self)).click(function (){
            var trThis = this;
            $(self).find( ".trSelected").removeClass('trSelected');
            if ($(trThis).get(0) == $( "tr:first", $(self)).get(0)){
            return;
            }
            $(trThis).addClass('trSelected');
            });
    }); 
}



只道当时是寻常
关注
专栏目录
element table 分页显示table数据信息
weixin_42517975的博客
04-28 2287
el-table 实现分页 代码实现 ： <div style="width: 65vw;margin-top: 2%;margin-left: 3%"> <el-table height="450" :data="userListTableData" border style="width: 100%"> <el-...
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
WEN_Windy的博客
08-25 7368
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录1.搭建环境1.1直接从网上下载SpringBoot样例网站程序1.2使用IDEA新建SpringBoot样例网站运行SpringBoot样例网站合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列...
利用JS实现 TABLE的分页
weixin_34235457的博客
10-30 832
为什么80%的码农都做不了架构师？>>> ...
bootstrap-table分页简单例子以及常见问题（文中带源码）
u014493323的博客
07-22 242
开发十年，就只剩下这套Java开发体系了 &gt;&gt;&gt;    ...
简单table分页
weixin_30521161的博客
12-23 172
html <table id="pagingTable"> <thead> <tr> <td> 第一列 </td> <td> ...
html table 分页
09-21
html table page
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
10-18
最后，`goPage()`函数会更新页面底部的分页链接，允许用户切换到不同的页面。这个函数会根据当前页码和总页数生成“首页”、“上一页”、“下一页”和“尾页”的链接。 总结起来，通过结合PHP的PDO功能、SQL查询、...
共10条数据。设置好相隔宽度，自动适应屏幕，先用死数据。最后在底部，生成elementUI的分页
06-06
首先，您可以使用Element UI的表格组件来展示您的数据，并设置表格的宽度为自适应屏幕。在表格中，您可以设置每列的宽度，使得各列之间有相隔宽度。 以下是一个简单的示例代码： ```html <el-table :data="table...
vue分页组件table-pagebar使用实例解析
09-01
在本实例中，我们讨论的是如何使用Vue分页组件`table-pagebar`，该组件是基于Bootstrap风格设计的，能够方便地实现数据的分页展示。 `table-pagebar`组件的设计目的是为了帮助开发者更轻松地在Vue项目中添加分页...
jsp分页显示数据（显示方式有很多种）
10-20
4. **分页导航**：在页面底部生成分页导航，包括上一页、下一页以及页码链接。页码链接的生成可以根据总记录数和每页记录数计算出总页数，然后生成1到总页数的链接。 5. **处理用户交互**：当用户点击页码链接时，...
table排序分页
02-08
table排序和分页table排序和分页table排序和分页table排序和分页table排序和分页
简单实用的table分页
09-07
数据少想一次读完，去下载了好多分页的实例，不是代码有错，有缺，就是乱的很，能用但是想改就无从下手，浪费了很多分，没办法，自己动脑子，写了个table分页的例子，分享给大家，给个一分意思意思。 注释很详细，适合菜鸟和初学者，大神就不要下了。
js+table分页
01-21
js+table分页实现，压缩包里有一个.html文件一个jQuery包，下载后可直接打开html文件，实现的功能包括：当前页、数据总量、页数、首页、上一页、下一页、尾页、页数跳转，只是功能实现没写css做美化
table自动分页
借人之智，完善自己
07-19 933
table自动打印分页
Table表分页以及增删改
u012949335的专栏
07-25 1896
详细链接：https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeak 説明：引用AjaxPro.2.dll来异步动态获取数据展示在页面上面，以Table表形式显示数据信息。 AjaxPro.2自行去网上下载，网址：  http://www.ajaxpro.info/   -------&gt;点击 D...
table 表格 自带分页
weixin_54397440的博客
11-28 97
多个表格 只需要 改一下myCustomerTablePageConfig 和 myCustomerTablePageChange 名字。
table分页组件
qq_38327141的博客
12-07 1172
table分页组件前言代码部分html代码效果图shujv2.js说明替换使用后测试图用于项目 前言 最近在做个一项目,前后端一起做,需要做一个查询分页的功能,于是想要找一个合适好用的js table分页组件,结果发现各种网页上面不是不好用,就是不能够使用,也可能是我级别太低用不了好多例子都没有结果.今天在一个网站上面找到了一个很好用的组件,现在分享给大家.链接在这里>>> 代码部分 话不多说,直接上代码 html代码 <!DOCTYPE html> <html&gt
Table 分页处理
weixin_34418883的博客
01-06 439
　　介绍两种table分页处理：PHP分页 和 js（jquery.table）分页。 　　一：jquery.table: 　　1:下载两个文件：table_jui.css 和jquery.dataTables.min.js（当然前面的加载 jquery.js文件）；将其拉入html 前面。 　　　　table_jui.css 和 jquery.dataTables.min.js ...
BootStrapTable 分页
最新发布
m0_74299308的博客
02-25 876
Bootstrap Table是一个可扩展的表格，可集成众多CSS框架，支持Bootstrap, Semantic UI, Bulma, Material Design, Foundation框架。1.使用bootstrap的时候，我们经常需要使用到表格，这时候通常又会设及到一些增删改查等功能，通常是以按钮的形式嵌入表格中，在column参数中，增加一列，title是操作里面定义了events:触发时的事件函数，formatter:添加按钮的函数。这里我们将编辑和删除功能以按钮的形式嵌入表格。
html分页显示数据
05-25
4. 在页面底部添加分页元素，如 `<ul>`，并使用 JavaScript 动态生成分页按钮和处理分页事件。 下面是一个简单的示例代码： ```html <!DOCTYPE html> 分页显示数据 table { border-collapse: collapse; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值