分页器twbsPagination.js的使用
首先祝大家新年快乐！回首2016，有太多的磨练，入行前端这一年多，学到了很多知识，从小白到一个老小白……昨天公司的年末嗨皮，还谈论起“澡堂歌唱论”——洗着澡，唱着歌！“挖掘机写代码”，——几个人谈论起到底入了计算机的这一行，将来想干点别的，都费劲。一起去蓝翔学习挖掘机吧，当你想做别的行业的时候，可以骄傲的说，我能用挖掘机写CODE！！！shit！说多了！想起来就想笑，哈哈~~~~~言归正传，说说twbsPagination分页的使用吧！
第一次使用分页，这个分页器基于bootstrap的，虽然做了修改，还是难以剥离bootstrap的样子~~，模板用的underscore.js。有不当的地方，请大神多多指教！
需要注明的地方，在code内注释，这里就不一一说明了。
效果图：
直接上code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="reset.css"/> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> <style type="text/css"> .table_info{border: 1px solid #e5e1db;padding: 20px 0;margin-top: 16px;background: #fffdfa;min-height: 200px;} .table_top{width: 1048px;height:54px;border-bottom: 1px solid #dcdcdc ;padding: 0px 6px;margin: 0 auto;line-height: 25px;} .table_top .table_top_brand{height: 25px;} .table_top p{width: 14px;height: 14px;border-radius: 50%;border: 2px solid #e8715b;float: left;margin: 4px 7px 0 0;box-sizing:content-box;} .table_top h3{color: #e77b32;float: left;font-size: 18px;font-weight: 600;margin: 0;} .table_top .count_info{font-size: 12px;text-align: right;} .table_top .count_info .count_start_time,.table_top .count_info .count_end_time{color: #399fd3;} .table_top .count_info .counts{color: #e77b32;} .table_info table{width: 1060px;margin: 10px auto;border-top:1px solid #dcdcdc;border-left:1px solid #dcdcdc;border-spacing:0;} .table_info table caption{height: 40px;color: #399fd3;text-align: center;font-size: 16px;line-height: 25px;font-weight: 600;} .table_info table td{text-align: center;line-height: 26px;font-size: 12px;padding:0 5px;word-wrap:break-word;word-break:break-all;border-bottom:1px solid #dcdcdc;border-right:1px solid #dcdcdc;} .table_info table th{font-weight: 600;font-size: 12px;line-height: 30px;color: #4a4a4a;background: #f6f6f6;border-bottom:1px solid #dcdcdc;border-right:1px solid #dcdcdc;text-align: center;} .table_info table td .identity{padding: 2px 4px;border-radius: 2px;color: white;} .table_info table td span.iden_false{background: #e8715b;color: white;padding: 2px 4px;border-radius: 2px;} .container_box{ width: 100%; } .container_box .pandora_pagination{ display: table; margin: 20px auto 0; font-size: 12px; } </style> </head> <body> <div class="table_info" id="table_info4"> <div class="table_top"> <div class='table_top_brand'> <p></p> <h3>行程</h3> </div> <div class='count_info'>自<em class='count_start_time'>起始查询日期</em>至<em class='count_end_time'>截止查询日期</em>,共有<em class='counts'>0</em>条记录。</div> </div> <table border="0" cellspacing="0" cellpadding="0" class="invoice_data_path"> <caption>行程详情</caption> <thead> <tr> <th width="15%">出行类型</th> <th width="15%">出发时间</th> <th width="30%">出发地</th> <th width="30%">目的地</th> <th width="10%">消费金额</th> </tr> </thead> <tbody> </tbody> </table> <div class="container_box"> <ul class="pagination pandora_pagination" id="pagination_invoice_data_path"></ul> </div> </div> <script src="jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="bootstrap.min.js"></script> <script src="jquery.twbsPagination.min.js" type="text/javascript" charset="utf-8"></script> <script src="underscore-min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ //返回的数据 //要填充的数据有两部分,一部分在invoice_history中的order_list,另一部分在invoice_order_list中,先定义了一个数组invoice_list，存放invoice_history中的order_list中的数据， var resp = { "invoice_history":[ { "address": "abceaddress", "application_id": "MzA1MDIxMzExMDMzNDY3ODExNQ", "application_type": 1, "apply_time": "2016-12-20 10:51:00", "city_id": 343, "district_id": 2913, "express_name": "XX快递", "express_no": "221115600354", "invoice_content": "服务费", "invoice_count": 1, "invoice_print_type": 1, "invoice_remark": "", "invoice_time": "2016-12-20 17:46:00", "invoice_title": "XXXXX科技有限公司", "invoice_value": 426.7, "order_count": 30, "order_list":[ { "end_time": "2016-12-18 19:17:00", "from_name": "地点A", "on_business": true, "order_id": "LTU4ODY3Mzc1ODE5NTY3MDgyMjA", "pay_amount": 10.6, "product_id": 260, "setup_time": "2016-12-18 19:04:00", "start_time": "2016-12-18 19:08:00", "to_name": "地点B" }, { "end_time": "2016-12-07 22:20:00", "from_name": "地点u", "on_business": true, "order_id": "LTUwMzMxOTAyODczMTY5MjQyODQ", "pay_amount": 12.2, "product_id": 260, "setup_time": "2016-12-07 22:06:00", "start_time": "2016-12-07 22:08:00", "to_name": "地点p" }, { "end_time": "2016-12-06 21:34:00", "from_name": "地点d", "on_business": true, "order_id": "LTUxNDMzNDQ0Nzc0OTM1NzM1MDA", "pay_amount": 16.6, "product_id": 260, "setup_time": "2016-12-06 21:09:00", "start_time": "2016-12-06 21:20:00", "to_name": "地点K" }, { "end_time": "2016-12-18 19:17:00", "from_name": "地点A", "on_business": true, "order_id": "LTU4ODY3Mzc1ODE5NTY3MDgyMjA", "pay_amount": 10.6, "product_id": 260, "setup_time": "2016-12-18 19:04:00", "start_time": "2016-12-18 19:08:00", "to_name": "地点B" }, { "end_time": "2016-12-07 22:20:00", "from_name": "地点u", "on_business": true, "order_id": "LTUwMzMxOTAyODczMTY5MjQyODQ", "pay_amount": 12.2, "product_id": 260, "setup_time": "2016-12-07 22:06:00", "start_time": "2016-12-07 22:08:00", "to_name": "地点p" }, { "end_time": "2016-12-06 21:34:00", "from_name": "地点d", "on_business": true, "order_id": "LTUxNDMzNDQ0Nzc0OTM1NzM1MDA", "pay_amount": 16.6, "product_id": 260, "setup_time": "2016-12-06 21:09:00", "start_time": "2016-12-06 21:20:00", "to_name": "地点K" }, { "end_time": "2016-12-06 19:41:00", "from_name": "地点L", "on_business": true, "order_id": "LTUxMTk3OTM0MjM3NTc5MTYwMjg", "pay_amount": 13.6, "product_id": 260, "setup_time": "2016-12-06 19:29:00", "start_time": "2016-12-06 19:32:00", "to_name": "地点I" }, { "end_time": "2016-11-18 11:22:00", "from_name": "地点d", "on_business": true, "order_id": "LTE3MzA5NTQ3NjEzODI0NDI4NzY", "pay_amount": 7.1, "product_id": 260, "setup_time": "2016-11-18 11:02:00", "start_time": "2016-11-18 11:10:00", "to_name": "地点f" }, { "end_time": "2016-11-01 08:34:00", "from_name": "地点B-西门", "on_business": true, "order_id": "LTQyMDQxMzcxNjU2MzUzOTgzNg", "pay_amount": 21.1, "product_id": 260, "setup_time": "2016-11-01 08:03:00", "start_time": "2016-11-01 08:12:00", "to_name": "地点h" }, { "end_time": "2016-10-30 09:14:00", "from_name": "地点B-西门", "on_business": false, "order_id": "NDg1NjE5NDE0MTY4MTkzMTU2", "pay_amount": 10, "product_id": 260, "setup_time": "2016-10-30 08:59:00", "start_time": "2016-10-30 09:02:00", "to_name": "地点f" }, { "end_time": "2016-10-28 12:27:00", "from_name": "地点B-西门", "on_business": true, "order_id": "MjQ2MTI5MTk4NzY5ODUwNTAw", "pay_amount": 10.4, "product_id": 260, "setup_time": "2016-10-28 12:11:00", "start_time": "2016-10-28 12:15:00", "to_name": "地点f" }, { "end_time": "2016-10-25 09:29:00", "from_name": "地点g", "on_business": true, "order_id": "OTc1MDU0ODg2Mjg1MDM1NjUy", "pay_amount": 21.7, "product_id": 260, "setup_time": "2016-10-25 09:04:00", "start_time": "2016-10-25 09:12:00", "to_name": "地点f" } ], "province_id": 27, "recipient_email": "xxxxx@xxxxxxx.com", "recipient_name": "XXX", "recipient_phone": "XXXxxxxxxxxxxxxx", "status": 3 }, { "address": "XX小区XX号楼1门Axxx", "application_id": "ODY1NjM2MzkzOTY1MzE3NTQyOQ", "application_type": 1, "apply_time": "2016-04-19 11:56:00", "city_id": 343, "district_id": 2913, "express_name": "XX快递", "express_no": "221013686121", "invoice_content": "服务费", "invoice_count": 1, "invoice_print_type": 1, "invoice_remark": "", "invoice_time": "2016-04-20 00:00:00", "invoice_title": "XXXXX科技有限公司", "invoice_value": 299.2, "order_count": 15, "order_list":[ { "end_time": "2016-04-19 11:50:00", "from_name": "地点z-推荐上车点", "on_business": false, "order_id": "MTU3ODk1MTI2NjkwNTA0OTIyMQ", "pay_amount": 4.9, "product_id": 260, "setup_time": "2016-04-19 11:18:00", "start_time": "2016-04-19 11:22:00", "to_name": "地点e" }, { "end_time": "2016-04-18 17:35:00", "from_name": "地点y", "on_business": false, "order_id": "MTUxNDk0MDEwMDgyMjY0ODk2NQ", "pay_amount": 7.5, "product_id": 260, "setup_time": "2016-04-18 17:07:00", "start_time": "2016-04-18 17:17:00", "to_name": "地点z" }, { "end_time": "2016-12-18 19:17:00", "from_name": "地点A", "on_business": true, "order_id": "LTU4ODY3Mzc1ODE5NTY3MDgyMjA", "pay_amount": 10.6, "product_id": 260, "setup_time": "2016-12-18 19:04:00", "start_time": "2016-12-18 19:08:00", "to_name": "地点B" }, { "end_time": "2016-12-07 22:20:00", "from_name": "地点u", "on_business": true, "order_id": "LTUwMzMxOTAyODczMTY5MjQyODQ", "pay_amount": 12.2, "product_id": 260, "setup_time": "2016-12-07 22:06:00", "start_time": "2016-12-07 22:08:00", "to_name": "地点p" }, { "end_time": "2016-12-06 21:34:00", "from_name": "地点d", "on_business": true, "order_id": "LTUxNDMzNDQ0Nzc0OTM1NzM1MDA", "pay_amount": 16.6, "product_id": 260, "setup_time": "2016-12-06 21:09:00", "start_time": "2016-12-06 21:20:00", "to_name": "地点K" }, { "end_time": "2016-12-06 19:41:00", "from_name": "地点L", "on_business": true, "order_id": "LTUxMTk3OTM0MjM3NTc5MTYwMjg", "pay_amount": 13.6, "product_id": 260, "setup_time": "2016-12-06 19:29:00", "start_time": "2016-12-06 19:32:00", "to_name": "地点I" }, { "end_time": "2016-11-18 11:22:00", "from_name": "地点d", "on_business": true, "order_id": "LTE3MzA5NTQ3NjEzODI0NDI4NzY", "pay_amount": 7.1, "product_id": 260, "setup_time": "2016-11-18 11:02:00", "start_time": "2016-11-18 11:10:00", "to_name": "地点f" }, { "end_time": "2016-11-01 08:34:00", "from_name": "地点B-西门", "on_business": true, "order_id": "LTQyMDQxMzcxNjU2MzUzOTgzNg", "pay_amount": 21.1, "product_id": 260, "setup_time": "2016-11-01 08:03:00", "start_time": "2016-11-01 08:12:00", "to_name": "地点h" }, { "end_time": "2016-10-30 09:14:00", "from_name": "地点B-西门", "on_business": false, "order_id": "NDg1NjE5NDE0MTY4MTkzMTU2", "pay_amount": 10, "product_id": 260, "setup_time": "2016-10-30 08:59:00", "start_time": "2016-10-30 09:02:00", "to_name": "地点f" }, { "end_time": "2016-10-28 12:27:00", "from_name": "地点B-西门", "on_business": true, "order_id": "MjQ2MTI5MTk4NzY5ODUwNTAw", "pay_amount": 10.4, "product_id": 260, "setup_time": "2016-10-28 12:11:00", "start_time": "2016-10-28 12:15:00", "to_name": "地点f" }, { "end_time": "2016-10-25 09:29:00", "from_name": "地点g", "on_business": true, "order_id": "OTc1MDU0ODg2Mjg1MDM1NjUy", "pay_amount": 21.7, "product_id": 260, "setup_time": "2016-10-25 09:04:00", "start_time": "2016-10-25 09:12:00", "to_name": "地点f" } ], "province_id": 27, "recipient_email": "xxxxx@xxxxxxx.com", "recipient_name": "XXX", "recipient_phone": "XXXxxxxxxxxxxxxx", "status": 3 } ], "invoice_order_list":[ { "end_time": "2016-12-28 12:39:00", "from_name": "地点d南门", "on_business": true, "order_id": "LTc4ODI5NDM1MjY3ODQ3NzYwNjA", "pay_amount": 5.3, "product_id": 260, "setup_time": "2016-12-28 12:07:00", "start_time": "2016-12-28 12:16:00", "to_name": "地点e" }, { "end_time": "2016-12-21 07:49:00", "from_name": "地点B", "on_business": false, "order_id": "LTY3MTc4MzE0MTg5MzMxOTY2Njg", "pay_amount": 12.7, "product_id": 260, "setup_time": "2016-12-21 07:33:00", "start_time": "2016-12-21 07:35:00", "to_name": "地点d" }, { "end_time": "2016-09-01 22:21:00", "from_name": "地点C", "on_business": false, "order_id": "LTcwNzUwMTQ1MzU3ODk3MjE0Njc", "pay_amount": 8.6, "product_id": 260, "setup_time": "2016-09-01 22:08:00", "start_time": "2016-09-01 22:13:00", "to_name": "地点B" } ], "profile":{ "age_level": 4, "auth_state": 2, "avatar_url": "", "corp": "12345", "driver_auth_state": 2, "employ": "PO", "gender": 1, "id_card_no": "140************517", "level": 0, "level_name": null, "mobile_number": "XXXxxxxxxxxxxxxx", "name": "XXX", "nickname": "Address", "reg_time": "2013-12-16 16:27:05", "sign": "hello", "trade": 1, "user_id": "3055295", "user_type": 2 }, "update_time": "2016-12-28 21:43:19" }; //模板 var invoicePathTemplate = _.template( '<tr>'+ "<td><%=product_id%></td>"+ "<td><%=start_time%></td>"+ "<td><%=from_name%></td>"+ "<td><%=to_name%></td>"+ "<td><%=pay_amount%></td>"+ "</tr>" ); var invoice_list = [];//存放invoice_history中的order_list中的数据， var invoice_list_count;//存放invoice_order_list中数据。 var invoice_data_path = $(".invoice_data_path tbody");//填充对象 var invoice_list_len;//整个数组的长度 drawInvoicePathTableTemplate(resp);//执行整合数组、拼接模板函数 //整合数组、拼接模板函数 function drawInvoicePathTableTemplate(resp){ var invoice_data = resp.invoice_history; invoice_list_count = resp.invoice_order_list; drawInvoiceList(invoice_data); function drawInvoiceList(invoice_data){ _.each(invoice_data, function(cols){ _.each(cols.order_list, function(col){ invoice_list.push(col);//存放invoice_history中的order_list中的数据， }); }); } //将order_list中的数据逐条放进总的数组中（也就是resp.invoice_order_list数组） _.each(invoice_list, function(col){ invoice_list_count.push(col); }); //把setup_time转成number _.each(invoice_list_count, function(col){ col.setup_time = parseInt(col.setup_time.replace(/\-|\:|\s/g,"")); if(col.product_id == "260"){ col.product_id = "车A"; }else if(col.product_id == "258"){ col.product_id = "车B"; }else{ col.product_id = ""; } }); //用setup_time给invoice_list_count数组排序。（效率低，别的方法暂时没研究） invoice_list_count = invoice_list_count.sort( function(a, b){ return (b.setup_time - a.setup_time); } ); //invoice_list_count数组长度 invoice_list_len = invoice_list_count.length; if(invoice_list_len > 0){ $("#table_info4 .count_start_time").html(invoice_list_count[invoice_list_len - 1].start_time); $("#table_info4 .count_end_time").html(invoice_list_count[0].start_time); $("#table_info4 .counts").html(invoice_list_len); } initInvoicePath();//执行分页函数 }; //分页函数 function initInvoicePath() { $('#pagination_invoice_data_path').removeData("twbs-pagination"); $('#pagination_invoice_data_path').unbind("page"); invoice_data_path.empty(); var pagenow = 1; //初始化当前页为1 var totalPage = 1; //初始化总页数为1 var visiblecount = 5; //可见页数为5 function loadInvoicePathData() { var length = 20; //每页显示的数据个数20 //根据数据长度重新定义总页数 var total_page = invoice_list_len / length; //请求页数默认为第一页 var page_no = 1; //数据总量不能整除20的时候，取整，比如42条数据，totalPage=2.1，twbsPagination默认的取2！！！，所以……自己改吧，向上取整为3。 totalPage = Math.ceil(total_page); //每次填充前先清空填充对象 invoice_data_path.empty(); //总页数小于可见页数时，可见页数=总页数 if (totalPage < visiblecount) { visiblecount = totalPage;} //开始分页 $('#pagination_invoice_data_path').twbsPagination({ totalPages : totalPage, visiblePages : visiblecount, startPage: pagenow, first: "首页", prev: "上一页", next: "下一页", last: "末页", onPageClick : function(event, page) { //再次清空填充对象 invoice_data_path.empty(); //已经显示的数据条数 var base_no = ((page-1) * 20); //剩余数据条数 = 数据总条数-已经显示的数据条数 var rest_no = invoice_list_len - base_no; //如果剩余条数大于或等于19，按每页20个显示。否则剩余几条，显示几条，不做判读会报错！！！！！！！ if(rest_no >= 19){ for (var i = base_no; i <= ( base_no + 19 ); i++) { var ele = $(invoicePathTemplate(invoice_list_count[i])); invoice_data_path.append(ele); }; }else{ for (var i = base_no; i <= ( base_no + rest_no - 1 ); i++) { var ele = $(invoicePathTemplate(invoice_list_count[i])); invoice_data_path.append(ele); }; } pagenow = page } }); } //执行分页 loadInvoicePathData(); }; } </script> </body> </html>
