模仿博客园首页 ajax 无刷新分页
的分页不过他的不是ajax 也像博客园的首页分页(转载请保持原著)：
思路：1：创建页码 如图:
服务器需要的返回总数(具体创建dom自己发挥 以及有多少页 具体思路 假如每页显示10条 总数除以10 1：结果等于总数不需要操作 2： 如果大于或者等于1默认为1 3：利用正则
判断有小数点后加+1)代码如下：pageNumberCount 是总数
pageNumberCount = json.total / 10, _RegExp = /\./;
if (pageNumberCount <= 1) {
pageNumberCount = 1;
} else if (_RegExp.test(pageNumberCount)) {
pageNumberCount = parseInt(pageNumberCount);
pageNumberCount = pageNumberCount + 1;
}:
2：点击1获取第一页数据 点击2获取第2页数据。。。。后面就是这样的规律 看完后是不是觉得很容易啊！没错ajax就是那么简单(呵呵 不过也是用的别人写好的jquery内库)
最后附加代码：
/*
*datatabel tootip提示
*/
function getHtml(){
this.html = "";
}
getHtml.prototype = {
show: function(){
var toolTip = $("<div id='tooltip' width='100px' height='12px'>" + this.html + "</div>");
return toolTip;
}
}
/*
*jquery datatable
*/
function _getDataTable(){
}
/*
* jquery datatable 扩展
* show 显示表格
* getupPage 点击上一页向左递减
* getdowmPage 点击下一页向右自加
* getPageIndex 点击页码操作
* createPageNumber 创建页面dom 操作
* btnCreatePageNumber 点击确定按钮查询操作
* createDateMenu 创建表头Menu
*/
_getDataTable.prototype = {
show: function (obj, tableID) {
if (obj == "" || tableID == "") {
return;
}
else {
var tableInfo = tableID.dataTable({
"bInfo": obj.bInfo,
"bStateSave": obj.bStateSave,
"bRetrieve": obj.bRetrieve,
"bLengthChange": obj.bLengthChange, // 是否允许用户通过一个下拉列表来选择分页后每页的行数
'bPaginate': obj.bPaginate, //是否分页。
"bProcessing": obj.bProcessing, //datatable获取数据时候是否显示正在处理提示信息。
"bServerSide": obj.bServerSide,
"bFilter": obj.bFilter, //过滤
"aaData": obj.aaData, //数据源
"aoColumns": obj.aoColumns, //数据源
"aoColumnDefs": obj.aoColumnDefs, //列排序
"fnRowCallback": obj.fnRowCallback,
"iDisplayLength": obj.iDisplayLength,
"sPaginationType": obj.sPaginationType
});
return tableInfo;
}
},
getupPage: function (page_no, id) {
//获取最大值最小值 这里修改利用each获取
var max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());
//当前页小于最小值
if (page_no <= min) {
if (page_no == 1) {
return;
}
for (var i = min; i < page_no + 5; i++) {
$("#a_" + i + "").attr("id", "a_" + (i - 1) + "");
$("#a_" + (i - 1) + "").text(i - 1);
}
}
//样式操作
dataTableCss(page_no, pageNumberCount);
},
getdowmPage: function (page_no, id) {
//获取最大值最小值 这里修改利用each获取
var i, max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());
//当前页小于最大值
if (page_no < max) {
}
else {
if (page_no < pageNumberCount) {//当前页小于总页数才修改id 和文本值
for (var i = page_no; i > 0; i--) {
$("#a_" + i + "").attr("id", "a_" + (i + 1) + "");
$("#a_" + (i + 1) + "").text(i + 1);
}
}
}
//样式操作
dataTableCss(page_no, pageNumberCount);
},
getPageIndex: function (page_no, id, pageNumberCount) {
//最大值最小值 这里修改利用each获取
var i, max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());
if (page_no != pageNumberCount) {//当前页不等于总页数
if (max == page_no) {////当前页等于最大值
for (var i = page_no; i > 0; i--) {
$("#a_" + i + "").attr("id", "a_" + (i + 1) + "");
$("#a_" + (i + 1) + "").text(i + 1);
}
}
else
if (min == page_no) {//当前页等于最小值
if (page_no != 1) {//当前页不等于1
for (var i = min; i < page_no + 5; i++) {
$("#a_" + i + "").attr("id", "a_" + (i - 1) + "");
$("#a_" + (i - 1) + "").text(i - 1);
}
}
}
}
//样式操作
dataTableCss(page_no, pageNumberCount);
},
createPageNumber: function (pageNumberCount) {
var pageCount = "", pageJquery = "",
upPage = "<input class='pageNumberInfo' type='button' id='upPage' value='上一页' title='上一页'/>",
dowmPage = "<input class='pageNumberInfo' type='button' value='下一页' id='dowmPage' title='下一页'/>";
omitPage = "<span id='omitPage' class='pageNumberInfo'>...</span>";
page.append(upPage);
if (pageNumberCount > 5) {
_sum = 5
for (var i = 1; i <= _sum; i++) {
pageCount += "<a class='pageNumberInfo' id='a_" + i + "' href=''>" + i + "</a>";
}
page.append(pageCount);
page.append(omitPage);
}
else {
for (var i = 1; i <= pageNumberCount; i++) {
pageCount += "<a class='pageNumberInfo' id='a_" + i + "' href=''>" + i + "</a>";
}
page.append(pageCount);
}
pageJquery = "共 " + pageNumberCount + " 页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
page.append(pageJquery);
page.append(dowmPage);
},
btnCreatePageNumber: function (page_no) {
var i;
//获取最大值最小值 这里修改利用each获取
var max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());
var pageCount = "", pageJquery = "",
upPage = "<input class='pageNumberInfo' type='button' id='upPage' value='上一页' title='上一页'/>",
dowmPage = "<input class='pageNumberInfo' type='button' value='下一页' id='dowmPage' title='下一页'/>";
omitPage = "<span id='omitPage' class='pageNumberInfo'>...</span>";
if (page_no >= max) {
if (page_no == pageNumberCount) {
//点6情况
page.html("");
page.append(upPage);
for (var i = 4; i >= 0; i--) {
pageCount += "<a class='pageNumberInfo' id='a_" + (page_no - i) + "' href=''>" + (page_no - i) + "</a>";
}
page.append(pageCount);
page.append(omitPage);
pageJquery = "共 " + pageNumberCount + " 页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
page.append(pageJquery);
page.append(dowmPage);
} else {
page.html("");
page.append(upPage);
for (var i = 4; i >= 0; i--) {
pageCount += "<a class='pageNumberInfo' id='a_" + (page_no - i + 1) + "' href=''>" + (page_no - i + 1) + "</a>";
}
page.append(pageCount);
page.append(omitPage);
pageJquery = "共 " + pageNumberCount + " 页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
page.append(pageJquery);
page.append(dowmPage);
}
} else if (page_no <= min) {
if (page_no == 1) {
page.html("");
page.append(upPage);
for (var i = 0; i <= 4; i++) {
pageCount += "<a class='pageNumberInfo' id='a_" + (parseInt(page_no) + i) + "' href=''>" + (parseInt(page_no) + i) + "</a>";
}
page.append(pageCount);
page.append(omitPage);
pageJquery = "共 " + pageNumberCount + " 页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
page.append(pageJquery);
page.append(dowmPage);
} else {
page.html("");
page.append(upPage);
for (var i = 0; i <= 4; i++) {
pageCount += "<a class='pageNumberInfo' id='a_" + (page_no - 1 + i) + "' href=''>" + (page_no - 1 + i) + "</a>";
}
page.append(pageCount);
page.append(omitPage);
pageJquery = "共 " + pageNumberCount + " 页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
page.append(pageJquery);
page.append(dowmPage);
}
}
//样式操作
dataTableCss(page_no, pageNumberCount);
},
createDateMenu: function (Menu) {
$(".tops").contextMenu({
menu: Menu
}, function (action, el, pos) {
//action 是点击对应菜单名称
});
}
}
function dataTableCss(page_no, pageNumberCount) {
$("#a_" + page_no + "").addClass("indexPageClass").siblings().removeClass("indexPageClass");
if (parseInt($("#page").children("a:last").text()) < pageNumberCount) {
$("#omitPage").show();
}
else {
$("#omitPage").hide();
}
}
html：
<div class="data_list">
@{
Html.RenderPartial("VehicleTable");
}
</div>
<div id="page" style="margin: 0 auto; text-align:center;"></div>
<div class="clear"></div>
VehicleTable视图:
@{ ViewBag.Title = "DataTable_JS"; } @CssOrJs.Css("DataTable/demo_page.css", Url) @CssOrJs.Css("DataTable/demo_table_jui.css", Url) @CssOrJs.Css("contextMenu/jquery.contextMenu.css", Url) @CssOrJs.Script("contextMenu/jquery.contextMenu.js", Url) @* DataTable*@ <div id="VehicleTable"> </div> @*菜单操作*@ <ul id="myMenu" class="contextMenu"> <li><a onclick="fnShowHide(0);" href="javascript:void(0)">column 1</a></li> <li><a onclick="fnShowHide(1);">column 2</a></li> <li><a onclick="fnShowHide(2);">column 3</a></li> <li><a onclick="fnShowHide(3);">column 4</a></li> <li><a onclick="fnShowHide(4);">column 5</a></li> <li><a onclick="fnShowHide(5);">column 6</a></li> <li><a onclick="fnShowHide(6);">column 7</a></li> </ul>
页面代码：
var spanMsg = $("#spanCX"), page = $("#page"), pageIndex = $("#page a"), pageNumberCount, page_no = 1, page_count = 10; var getVehiceTable = new _getDataTable(), isCreatePage = true, ajax_request = false,jumpto=$("#jumpto");
pageIndex.live("click", function (e) {
e.preventDefault();
if (ajax_request == false) {
page_no = parseInt($(this).attr("id").substring(2)); //(/\d+/).exec($(this).attr("id"));
var createobj = { page_no: page_no, pageID: "$('#page a')", pageNumberCount: pageNumberCount };
vehicle_Jquery("pageIndex", createobj);
}
});
$("#btnJquery").live("click", function (e) {
if (ajax_request==false) {
page_no = $("#jumpto").val().trim();
if (/^\d+$/.test(page_no) == false) {
return;
}
if (page_no > pageNumberCount) {
page_no = pageNumberCount;
}
var createobj = { page_no: page_no };
vehicle_Jquery("btnJquery", createobj);
}
});
$("#upPage").live("click", function (e) {
if (ajax_request == false) {
getVehiceTable.getupPage(page_no, $("#page a"));
if (page_no != 1) {
page_no--;
vehicle_Jquery("null",null);
}
$("#a_" + page_no + "").addClass("indexPageClass").siblings().removeClass("indexPageClass");
}
});
$("#dowmPage").live("click", function () {
if (ajax_request == false) {
getVehiceTable.getdowmPage(page_no, $("#page a"));
if (page_no < pageNumberCount) {//当前页小于总页数才请求数据
page_no++;
vehicle_Jquery("null", null);
}
$("#a_" + page_no + "").addClass("indexPageClass").siblings().removeClass("indexPageClass");
}
});
vehicle_Jquery:
function vehicle_Jquery(flag, obj) { var name = userName.val().trim(), _cust_id, _tree_path; ajax_request = true; spanMsg.show(); if (name == "") { _cust_id = $.cookie('Login_cust_id'); _tree_path = $.cookie('Login_tree_path'); var searchUrl = $.cookie('xmlHost') + "customer/" + _cust_id + "/vehicle/search"; var searchData = { auth_code: $.cookie('Login_auth_code'), tree_path: _tree_path, mode: "all", page_no: page_no, page_count: page_count, key: txtVehicleNumber.val().trim() }; var searchObj = { type: "GET", url: searchUrl, data: searchData, success: function (json) { vehiclSearchSuccess(json, flag, obj) }, error: OnError }; ajax_function(searchObj); } else { var isHave = false; for (var i = 0; i < _uerName.length; i++) { if (name == _uerName[i].cust_name) { isHave = true; _cust_id = _uerName[i].cust_id; _tree_path = _uerName[i].tree_path; var searchUrl = $.cookie('xmlHost') + "customer/" + _cust_id + "/vehicle/search"; var searchData = { auth_code: $.cookie('Login_auth_code'), tree_path: _tree_path, mode: "all", page_no: page_no, page_count: page_count, key: txtVehicleNumber.val().trim() }; var searchObj = { type: "GET", url: searchUrl, data: searchData,success: function (json) { vehiclSearchSuccess(json, flag, obj) }, error: OnError }; ajax_function(searchObj); break; } } if (!isHave) { alert("用户名输入错误!"); } } }
ajax_function 代码：
/* * jquery ajax */ function ajax_function(obj){ $.ajax({ type: obj.type, url: obj.url, data: obj.data, dataType: obj.dataType, success: obj.success, error: obj.error }); }
最后附加 vehiclSearchSuccess函数
var vehicleInfoSuccess = function vehicleInfoSuccess(json, flag, obj) { var j, _j, UnContacter, Uncontacter_tel; for (var i = 0; i < json.data.length; i++) { j = json.data[i].create_time.indexOf("T"); _j = json.data[i].service_end_date.indexOf("T"); json.data[i].create_time = json.data[i].create_time.substring(0, j); json.data[i].service_end_date = json.data[i].service_end_date.substring(0, _j); } spanMsg.hide(); VehicleTable.empty(); VehicleTable.html(tbHtml); VeicleTableID = $("#VeicleDable"), VDable = $("#VeicleDable thead tr th"); var _columns = [{ "mData": "cust_name", "sClass": "center" }, { "mData": "obj_name", "sClass": "center" }, { "mData": "cust_name", "sClass": "center" }, { "mData": "cust_id", "sClass": "center" }, { "mData": "sim", "sClass": "center" }, { "mData": "create_time", "sClass": "center" }, { "mData": "service_end_date", "sClass": "center" }, { "mData": null, "sClass": "center", "fnRender": function (obj) { return '<a id=' + obj.aData.obj_id + ' class="set" href="#">设置</a>'; } }]; var aoColumnDefs = [{ "bSortable": false, "aTargets": [7]}]//设置0列不可排序 var objTable = { "bInfo": false, "bStateSave": false, "bRetrieve": true, "bLengthChange": false, 'bPaginate': false, "bProcessing": true, "bServerSide": false, "bFilter": false, "aaData": json.data, "aoColumns": _columns, "aoColumnDefs": aoColumnDefs } VeicleTable = getVehiceTable.show(objTable, VeicleTableID); //create pageNumber if (isCreatePage == true) { if (json.data.length <= 0) { return; } pageNumberCount = json.total / 10, _RegExp = /\./; if (pageNumberCount <= 1) { pageNumberCount = 1; } else if (_RegExp.test(pageNumberCount)) { pageNumberCount = parseInt(pageNumberCount); pageNumberCount = pageNumberCount + 1; } getVehiceTable.createPageNumber(pageNumberCount); isCreatePage = false; } ajax_request = false; //菜单操作 getVehiceTable.createDateMenu("myMenu"); //菜单按钮html赋值(取dataTable对象的列名称,申明 var Mydata 把Mydata赋值VeicleTableID.dataTable({xxxx}) Mydata.DataTable.settings[0].aoColumns[0].sTitle) VULhtml.each(function (index) { if ($.cookie('VeicleMenu' + index) == "x") { VULhtml[index].innerHTML = VeicleTable.DataTable.settings[0].aoColumns[index].sTitle; } else { VULhtml[index].innerHTML = VDable[index].innerHTML + '√'; } }); if (flag == "pageIndex") { getVehiceTable.getPageIndex(obj.page_no, obj.pageID, obj.pageNumberCount); } else if (flag == "btnJquery") { getVehiceTable.btnCreatePageNumber(obj.page_no); $("#jumpto").val(obj.page_no); }
