基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)
本文實(shí)例講解了基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)功能,分享給大家供大家參考,具體內(nèi)容如下
效果圖:
具體代碼:
<html> <head> <title>面向?qū)ο蟮臒o(wú)刷新表格分頁(yè)</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <link rel="stylesheet" href="css/king-table.css"/> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="js/king-table.js"></script> </head> <body> <table id="cs_table" class="data-table"></table> <br/> <table id="cs_table2" class="data-table"></table> <script type="text/javascript"> var data = []; for(var i=0;i<103;i++){ data[i] = {id:i+1,name:"jason"+(i+1),gender:"男",age:i+1,address:"成都"}; } var cs = new table({ "tableId":"cs_table", //必須 表格id "headers":["序號(hào)","姓名","性別","年齡","地址"], //必須 thead表頭 "data":data, //必須 tbody 數(shù)據(jù)展示 "displayNum": 10, //必須 默認(rèn) 10 每頁(yè)顯示行數(shù) "groupDataNum":5, //可選 默認(rèn) 10 組數(shù) "display_tfoot":true, // true/false 是否顯示tfoot --- 默認(rèn)false "bindContentTr":function(){ //可選 給tbody 每行綁定事件回調(diào) this.tableObj.find("tbody").on("click",'tr',function(e){ return false; var tr_index = $(this).data("tr_index"); // tr行號(hào) 從0開(kāi)始 var data_index = $(this).data("data_index"); //數(shù)據(jù)行號(hào) 從0開(kāi)始 }) }, sort:true, // 點(diǎn)擊表頭是否排序 true/false --- 默認(rèn)false sortContent:[ { index:0,//表頭序號(hào) compareCallBack:function(a,b){ //排序比較的回調(diào)函數(shù) var a=parseInt(a.id,10); var b=parseInt(b.id,10); if(a < b) return -1; else if(a == b) return 0; else return 1; } }, { index:3,//表頭序號(hào) compareCallBack:function(a,b){ //排序比較的回調(diào)函數(shù) var a=parseInt(a.age,10); var b=parseInt(b.age,10); if(a < b) return -1; else if(a == b) return 0; else return 1; } } ], specialRows:[ { row:4, cssText:{ "color":"#FFCF17" } } ], search:true // 默認(rèn)為false 沒(méi)有搜索 }); </script> </body> </html>
html,body{margin: 0;padding:0} a:focus {outline: none;} h3.head_title {border-bottom: 1px solid #d5ddeb;color: #1c7493;display: block;font-size: 14px;height: 30px;line-height: 30px;margin-bottom: 10px;} /* 通用表格顯示 */ table, th, td {font: 12px Arial,Helvetica,sans-serif,'宋體';margin: 0;padding: 0} table{border-spacing: 0;border-collapse: collapse;empty-cells: show} .data-table {width: 100%;border-style: none;background-color: #fff;/*margin-bottom: 20px;*/text-align: left;} .data-table th, .data-table td { padding: 5px;line-height: 30px} .data-table thead th {background-color: #eee;margin: 0;text-align: left;border-top: 1px solid #cfcfcf;border-bottom: 1px solid #cfcfcf;font-weight: 500} .data-table tbody td {background-color: #fff;border-bottom: 1px dotted #ddd;table-layout:fixed;word-break:break-all;border-collapse:collapse;font-weight: 400} .data-table tbody tr.evenrow td {background-color: #f4f4f4;} .data-table tfoot td {background-color: #fafafa;text-align: right;border-bottom: 1px solid #cfcfcf;} /*表格分頁(yè)列表*/ .data-table td.paging a {border: 1px solid #eee; color: #444; margin: 4px; padding: 2px 7px; text-decoration: none; text-align:center;} /*表格分頁(yè)當(dāng)前頁(yè)*/ .data-table td.paging a.current {background: #eee; border: 1px solid #CFCFCF; color: #444; font-weight: bold;} .data-table td.paging input{border:1px solid #4D90BB;font-family:Arial,sans-serif,Tahoma; font-size:12px; padding:0 5px;outline: none} .data-table td.paging .search-txt{height:30px;line-height:30px;width: 100px } .data-table td.paging .search-btn{height: 32px;border-left:none;cursor: pointer;_filter:chroma(color=#000000);_border:none;} /*表格排序*/ .data-table thead th.bg{background:#eee url("../images/bg.gif") right center no-repeat;cursor: pointer} .data-table thead th.asc{background: url("../images/asc.gif") right center no-repeat;cursor: pointer} .data-table thead th.desc{background: url("../images/desc.gif") right center no-repeat;cursor: pointer}
以上就是基于jquery實(shí)現(xiàn)表格無(wú)刷新分頁(yè)功能的詳細(xì)代碼,希望對(duì)大家的學(xué)習(xí)有所幫助。
- 基于Jquery實(shí)現(xiàn)表格動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)的表格分頁(yè)實(shí)現(xiàn)代碼
- JQuery頁(yè)面的表格數(shù)據(jù)的增加與分頁(yè)的實(shí)現(xiàn)
- jquery 表格分頁(yè)等操作實(shí)現(xiàn)代碼(pagedown,pageup)
- 擴(kuò)展jquery實(shí)現(xiàn)客戶端表格的分頁(yè)、排序功能代碼
- 基于jQuery實(shí)現(xiàn)的無(wú)刷新表格分頁(yè)實(shí)例
- jQuery給表格添加分頁(yè)效果
- 利用jQuery實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表格上下翻頁(yè)效果
相關(guān)文章
jquery ztree實(shí)現(xiàn)模糊搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)模糊搜索功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用
這篇文章主要介紹了jquery中的ajax方法怎樣通過(guò)JSONP進(jìn)行遠(yuǎn)程調(diào)用,需要的朋友可以參考下2014-05-05jQuery select自動(dòng)選中功能實(shí)現(xiàn)方法分析
這篇文章主要介紹了jQuery select自動(dòng)選中功能,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)select響應(yīng)與級(jí)聯(lián)菜單顯示相關(guān)功能與操作技巧,需要的朋友可以參考下2016-11-11JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jquery DataTable實(shí)現(xiàn)前后臺(tái)動(dòng)態(tài)分頁(yè)
本篇文章主要介紹了jquery DataTable實(shí)現(xiàn)前后臺(tái)動(dòng)態(tài)分頁(yè)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06