閒來無事，自制了一個jquey表格數據分頁的插件，使用了bootstrap的表格和分頁樣式，能將ajax查詢得到的數據集合顯示在表格中並實現分頁功能。你只需調用jquery函數:$("#mytable").datagrid(json);即可實現。本插件需先引入bootstrap樣式和jquery.js。附上效果圖和源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container" style="margin-top: 60px;">
<table class="table table-bordered table-striped" id="mytable"></table>
</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-datagrid.js" type="text/javascript" charset="utf-8"></script>
<script src="js/test.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
/*
* 表格顯示數據分頁插件
* 使用該插件要調用jQuery對象的datagrid(json)方法初始化表格
* 參數json說明
* total爲總行數
* rows爲總記錄集合
* pageSize爲頁面顯示最大記錄數
*/
(function(jQuery){
//給jQuery添加顯示 表格的方法
$.fn.datagrid = function(json){
datagrid.load(json,this);
return this;
};
var datagrid = {
load:function(json,tableEle){
datagrid.table.tableEle = tableEle;
//初始化總記錄數、頁面要顯示的最大記錄數
datagrid.initData(json);
//創建表頭
datagrid.functions.createTableHead(tableEle);
//創建表體
datagrid.functions.createTableBody(tableEle);
//創建表尾
datagrid.functions.createTabelFoot(tableEle);
//初始化表尾分頁按鈕
datagrid.functions.createPaginationBtn();
//初始化首頁數據
datagrid.pageBean.pageCode = 1;
datagrid.functions.showData(datagrid.pageBean.pageCode);
//初始化分頁超鏈接事件
datagrid.initPaginationEvent();
},
initPaginationEvent:function(){
$("tfoot tr td ul li a").each(function(){
if($(this).attr("href") == 'prev'){
$(this).click(function(){
datagrid.pageBean.pageCode--;
datagrid.functions.showData(datagrid.pageBean.pageCode);
return false;
});
}else if($(this).attr("href") == 'next'){
$(this).click(function(){
datagrid.pageBean.pageCode++;
datagrid.functions.showData(datagrid.pageBean.pageCode);
return false;
});
}else{
$(this).click(function(){
datagrid.pageBean.pageCode = parseInt($(this).attr("href"));
datagrid.functions.showData(datagrid.pageBean.pageCode);
return false;
});
}
});
},
initData:function(json){
datagrid.data.total = json.total;
datagrid.data.dataList = json.rows;
datagrid.data.pageSize = json.pageSize;
datagrid.pageBean.totalPage = datagrid.pageBean.getTotalPage();
},
functions:{
createTableHead:function(tableEle){
//創建表頭
var $thead = $("<thead></thead>");
datagrid.table.$thead = $thead
//得到其中一行數據
var oneRow = datagrid.data.dataList[0];
//遍歷得到表頭字段
var $headtr = $("<tr></tr>");
for(var field in oneRow){
//創建th標籤，並將字段填入其中
var $th = $("<th></th>");
$th.text(field);
//將th標籤追加到tr標籤中
$headtr.append($th);
}
//將tr標籤追加到thead標籤中
$thead.append($headtr);
//將thead標籤追加到表格中
$(tableEle).append($thead);
},
createTableBody:function(tableEle){
//創建tbody標籤，將其追加到tableEle中
$tbody = $("<tbody></tbody>");
datagrid.table.$tbody = $tbody;
$(tableEle).append($tbody);
},
createTabelFoot:function(tableEle){
//創建tfoot標籤
$tfoot = $("<tfoot></tfoot>");
datagrid.table.$tfoot = $tfoot;
$(tableEle).append($tfoot);
},
showData:function(pageCode){
//清空tbody中的數據
$("tbody").empty();
//每次顯示數據時判斷上一頁下一頁是否能點擊
datagrid.functions.checkPrevAndNext();
//每次顯示數據時高亮當前頁碼
datagrid.functions.highlightPageCode();
//初始化當前頁碼
datagrid.pageBean.pageCode = pageCode;
//根據當前頁碼獲得要顯示的起始行和結束行
var beginRow = datagrid.pageBean.getBeginRow();
var endRow = datagrid.pageBean.getEndRow();
//遍歷數據集合創建行tr
var dataArr = datagrid.data.dataList;
for(var i = beginRow ; i < endRow ; i++){
$tr = $("<tr></tr>");
//遍歷每行數據的屬性將數據填充到該行中
var oneRow = dataArr[i];
for(var field in oneRow){
$td = $("<td></td>");
var value = oneRow[field];
$td.text(value);
$tr.append($td);
}
//將該行追加到tbody中
datagrid.table.$tbody.append($tr);
}
},
createPaginationBtn:function(){
$tr = $("<tr></tr>");
$td = $("<td class='text-center'></td>");
$td.attr("colspan",datagrid.table.$thead.children("tr").children("th").length+'');
$ul = $("<ul class='pagination'></ul>");
datagrid.table.$paginationUl = $ul;
$prevli = $("<li><a href='prev'><span>«</span></a></li>");
$ul.append($prevli);
var totalPage = datagrid.pageBean.totalPage;
for(var i = 0 ; i < totalPage ; i++){
$li = $("<li></li>");
$a = $("<a></a>");
$a.attr("href",i+1+'');
$a.text(i+1);
$li.append($a);
$ul.append($li);
}
$nextli = $("<li><a href='next'><span>»</span></a></li>");
$ul.append($nextli);
$td.append($ul);
$tr.append($td);
datagrid.table.$tfoot.append($tr);
},
checkPrevAndNext:function(){
if(datagrid.pageBean.pageCode == 1){
$("a[href='prev'").hide();
}else if(datagrid.pageBean.pageCode == datagrid.pageBean.totalPage){
$("a[href='next'").hide();
}else{
$("a[href='prev'").show();
$("a[href='next'").show();
}
},
highlightPageCode:function(){
$("tfoot tr td ul li").removeClass("active");
$("tfoot tr td ul li a").each(function(){
if(datagrid.pageBean.pageCode == parseInt($(this).attr("href"))){
$(this).parent().addClass("active");
}
});
}
},
data:{ //在傳入json是被初始化
total:null,
dataList:null,
pageSize:null
},
table:{ //在加載表格框架時被初始化
tableEle:null,
$thead:null,
$tbody:null,
$tfoot:null,
$paginationUl:null
},
pageBean:{ //在顯示具體哪一頁時被初始化
pageCode:null,
totalPage:null,
getTotalPage:function(){
var totalPage = datagrid.data.total % datagrid.data.pageSize;
if(totalPage){
return parseInt(datagrid.data.total / datagrid.data.pageSize) + 1;
}else{
return parseInt(datagrid.data.total / datagrid.data.pageSize);
}
},
getBeginRow:function(){
return (datagrid.pageBean.pageCode - 1)*datagrid.data.pageSize;
},
getEndRow:function(){
return datagrid.pageBean.getBeginRow() + datagrid.data.pageSize;
}
}
}
})(jQuery);
$(function() {
var json = {
"total": 60,
"rows": [{
"code": "001",
"username": "Name 1",
"address": "Address 11",
"col45": "col4 data"
},
{
"code": "002",
"username": "Name 2",
"address": "Address 13",
"col45": "col4 data"
},
{
"code": "003",
"username": "Name 3",
"address": "Address 87",
"col45": "col4 data"
},
{
"code": "004",
"username": "Name 4",
"address": "Address 63",
"col45": "col4 data"
},
{
"code": "005",
"username": "Name 5",
"address": "Address 64",
"col45": "col4 data"
},
{
"code": "006",
"username": "Name 6",
"address": "Address 65",
"col45": "col4 data"
},
{
"code": "007",
"username": "Name 7",
"address": "Address 66",
"col45": "col4 data"
},
{
"code": "008",
"username": "Name 8",
"address": "Address 67",
"col45": "col4 data"
},
{
"code": "009",
"username": "Name 9",
"address": "Address 68",
"col45": "col4 data"
},
{
"code": "010",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "011",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "012",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "001",
"username": "Name 1",
"address": "Address 11",
"col45": "col4 data"
},
{
"code": "002",
"username": "Name 2",
"address": "Address 13",
"col45": "col4 data"
},
{
"code": "003",
"username": "Name 3",
"address": "Address 87",
"col45": "col4 data"
},
{
"code": "004",
"username": "Name 4",
"address": "Address 63",
"col45": "col4 data"
},
{
"code": "005",
"username": "Name 5",
"address": "Address 64",
"col45": "col4 data"
},
{
"code": "006",
"username": "Name 6",
"address": "Address 65",
"col45": "col4 data"
},
{
"code": "007",
"username": "Name 7",
"address": "Address 66",
"col45": "col4 data"
},
{
"code": "008",
"username": "Name 8",
"address": "Address 67",
"col45": "col4 data"
},
{
"code": "009",
"username": "Name 9",
"address": "Address 68",
"col45": "col4 data"
},
{
"code": "010",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "011",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "012",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "001",
"username": "Name 1",
"address": "Address 11",
"col45": "col4 data"
},
{
"code": "002",
"username": "Name 2",
"address": "Address 13",
"col45": "col4 data"
},
{
"code": "003",
"username": "Name 3",
"address": "Address 87",
"col45": "col4 data"
},
{
"code": "004",
"username": "Name 4",
"address": "Address 63",
"col45": "col4 data"
},
{
"code": "005",
"username": "Name 5",
"address": "Address 64",
"col45": "col4 data"
},
{
"code": "006",
"username": "Name 6",
"address": "Address 65",
"col45": "col4 data"
},
{
"code": "007",
"username": "Name 7",
"address": "Address 66",
"col45": "col4 data"
},
{
"code": "008",
"username": "Name 8",
"address": "Address 67",
"col45": "col4 data"
},
{
"code": "009",
"username": "Name 9",
"address": "Address 68",
"col45": "col4 data"
},
{
"code": "010",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "011",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "012",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "001",
"username": "Name 1",
"address": "Address 11",
"col45": "col4 data"
},
{
"code": "002",
"username": "Name 2",
"address": "Address 13",
"col45": "col4 data"
},
{
"code": "003",
"username": "Name 3",
"address": "Address 87",
"col45": "col4 data"
},
{
"code": "004",
"username": "Name 4",
"address": "Address 63",
"col45": "col4 data"
},
{
"code": "005",
"username": "Name 5",
"address": "Address 64",
"col45": "col4 data"
},
{
"code": "006",
"username": "Name 6",
"address": "Address 65",
"col45": "col4 data"
},
{
"code": "007",
"username": "Name 7",
"address": "Address 66",
"col45": "col4 data"
},
{
"code": "008",
"username": "Name 8",
"address": "Address 67",
"col45": "col4 data"
},
{
"code": "009",
"username": "Name 9",
"address": "Address 68",
"col45": "col4 data"
},
{
"code": "010",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "011",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "012",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "001",
"username": "Name 1",
"address": "Address 11",
"col45": "col4 data"
},
{
"code": "002",
"username": "Name 2",
"address": "Address 13",
"col45": "col4 data"
},
{
"code": "003",
"username": "Name 3",
"address": "Address 87",
"col45": "col4 data"
},
{
"code": "004",
"username": "Name 4",
"address": "Address 63",
"col45": "col4 data"
},
{
"code": "005",
"username": "Name 5",
"address": "Address 64",
"col45": "col4 data"
},
{
"code": "006",
"username": "Name 6",
"address": "Address 65",
"col45": "col4 data"
},
{
"code": "007",
"username": "Name 7",
"address": "Address 66",
"col45": "col4 data"
},
{
"code": "008",
"username": "Name 8",
"address": "Address 67",
"col45": "col4 data"
},
{
"code": "009",
"username": "Name 9",
"address": "Address 68",
"col45": "col4 data"
},
{
"code": "010",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "011",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
},
{
"code": "012",
"username": "Name 10",
"address": "Address 69",
"col45": "col4 data"
}
],
pageSize:10
};
$("#mytable").datagrid(json);
});