支持分页表格的实现

JS CSS 表格 分页 AJAX

闲来无事，自己分装了一个支持分页的表格,支持本地数据，支持ajax读取server数据。

代码比较清晰，不做过多解释。

调用方法很简单

var tb1 = new ITable("test_tb", 2); //第一个参数是整个控件元素div的id,第二个参数是每个表格数据条数
tb1.load(null ,[{name:"zhangsan", age:1}, {name:"lis", age:2}]); //当使用ajax读取数据时传入第一个参数，代表ajax的请求地址。当使用本地数据时，第一个参数置空，第二个参数是本地数据

直接上截图

代码可直接在本地运行：

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function ITable(id, limit) {
this.id = id;
this.start = 0;
this.limit = limit;
this.data = null;
this.url = null;
this.localdata = null;
this.total = null;
this.init();
}

ITable.prototype.init = function() {
var thisObj = this;
$("#" + this.id + " .first_btn").on("click", function () {
thisObj.first();
thisObj.setPageNo();
});

$("#" + this.id + " .next_btn").on("click", function () {
thisObj.next();
thisObj.setPageNo();
});

$("#" + this.id + " .prev_btn").on("click", function () {
thisObj.prev();
thisObj.setPageNo();
});

$("#" + this.id + " .last_btn").on("click", function () {
thisObj.last();
thisObj.setPageNo();
});

$("#" + this.id + " .set_page input").on("blur", function () {
var val = parseInt($(this).val());
if(val > 0 && val <= Math.ceil(thisObj.total / thisObj.limit)) {
thisObj.start = (val - 1) * thisObj.limit;
}
thisObj.load(thisObj.url, thisObj.localdata);
});
}

ITable.prototype.setdata = function() {
var result = "";
$.each(this.data, function(i, item) {
result += "<tr>";
$.each(item, function(key, value) {
result += "<td>" + value+ "</td>";
});
result += "</tr>";
});
$("#" + this.id + " table tbody").html(result);
}

ITable.prototype.setPageNo = function() {
$("#" + this.id + " .set_page input").val(this.start / this.limit + 1);
}

ITable.prototype.load = function(url, localdata) {
this.url = url;
this.localdata = localdata;
if(localdata) {
this.total = localdata.length;
if(localdata.length > this.start + this.limit) {
this.data = localdata.slice(this.start, this.start + this.limit);
} else if(localdata.length > this.start) {
this.data = localdata.slice(this.start);
} else {
return;
}
this.setdata();
} else {
var thisObj = this;
$.getJSON(url, {start:this.start, limit: this.limit}, function(json){
thisObj.data = json.data.content;
thisObj.total = json.data.totalElements;
thisObj.setdata();
});
}
}

ITable.prototype.next = function() {
if(this.start < this.total - this.limit) {
this.start += this.limit;
this.load(this.url, this.localdata);
}
}

ITable.prototype.prev = function() {
if(this.start > 0) {
this.start -= this.limit;
}
this.load(this.url, this.localdata);
}

ITable.prototype.first = function() {
this.start = 0;
this.load(this.url, this.localdata);
}

ITable.prototype.last = function() {
this.start = this.total - (this.total % this.limit == 0 ? this.limit : this.total % this.limit);
this.load(this.url, this.localdata);
}

 

$(function() {
var tb1 = new ITable("test_tb", 2);
tb1.load(null ,[{name:"zhangsan", age:1}, {name:"lis", age:2},
{name:"zhangsan", age:3}, {name:"lis", age:4},
{name:"zhangsan", age:5}, {name:"lis", age:6},
{name:"zhangsan", age:7}, {name:"lis", age:8},
{name:"zhangsan", age:9}, {name:"lis", age:10},
{name:"zhangsan", age:11}, {name:"lis", age:12},
{name:"zhangsan", age:13}, {name:"lis", age:14},
{name:"zhangsan", age:15}, {name:"lis", age:16},
{name:"zhangsan", age:17}, {name:"lis", age:18},
{name:"zhangsan", age:19}, {name:"lis", age:20}]);
});
</script>

<style>
body {
color:#5f5f5f;
}
.itable th {
background-color:#ECE9D8;
border-spacing:0px;
border-bottom:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #ACA899;
margin:0;
}

.itable td {
border:1px solid #C0C0C0;
}

.itable table {
width:100%;
table-layout:fixed;
border-spacing: 0;
border-collapse: collapse;
}

.itable table tr:hover {
background: #66AB0D;
color:#ffffff;
font-weight:bold;
font-size:1.2em;
}

.itoolbar {
background-color:#ECE9D8;
height:20px;
line-height:20px;
padding:5px;
}

.itoolbar .tb_btn:hover {
background-color:#C6D3EF;
border:1px solid #3169C6;
cursor:hand;
}
.itoolbar .tb_btn {
height:100%;
display:inline-block;
}
.itoolbar .icon {
padding-left: 30px;
background-image: url(aa.gif);
}

.itoolbar .set_page input {
height: 100%;width:30px;
}
.ititle {
background-color:#000000;
font-weight:bold;
height:20px;
color:#ffffff;
}

.itable {
border:1px solid #000000;
border-radius: 5px 5px 0px 0px;
}


</style>
<div style="width:600px;" class="itable" id="test_tb">
<div class="ititle">title
</div>
<div class="itoolbar">
<div class="icon tb_btn">Menu</div>
</div>
<table>
<thead><th>Name</th><th>Age</th></thead>
<tbody>
</tbody>
</table>
<div class="itoolbar">
<div class="tb_btn first_btn">&nbsp;|&lt;</div>
<div class="tb_btn prev_btn">&nbsp;&lt;</div>
<div class="tb_btn set_page"><input type="text" value="1"/></div>
<div class="tb_btn next_btn">&nbsp;&gt;</div>
<div class="tb_btn last_btn">&nbsp;&gt;|</div>
</div>
</div>

尊重别人的劳动就是尊重自己，转载注明地址，谢谢！

此处误删，在江湖