詳解MVC如何使用開(kāi)源分頁(yè)插件（shenniu.pager.js）
最近比較忙，前期忙公司手機(jī)端接口項(xiàng)目，各種開(kāi)發(fā)+調(diào)試+發(fā)布現(xiàn)在幾乎上線無(wú)問(wèn)題了；雖然公司項(xiàng)目忙不過(guò)在期間抽空做了兩件個(gè)人覺(jué)得有意義的事情，一者使用aspnetcore開(kāi)發(fā)了個(gè)人線上項(xiàng)目（要說(shuō)線上其實(shí)只能ip訪問(wèn)，沒(méi)有域名哈哈），其架構(gòu)組成由：aspnetcore1.0.0+redis+ postgressql+TaskMainForm服務(wù)，這個(gè)項(xiàng)目在后期會(huì)開(kāi)源出來(lái)供大家分享學(xué)習(xí)，站點(diǎn)地址點(diǎn)這里心聲網(wǎng)；一者是目前正在做的后臺(tái)管理框架一葉子，現(xiàn)目前剛好吧js分頁(yè)插件shenniu.pager.js寫(xiě)完，個(gè)人覺(jué)得還是可以的，這也是本章將要和大家分享的內(nèi)容；那么開(kāi)始今天的分享內(nèi)容，希望各位多多掃碼支持：
- 為什么采用js分頁(yè)及效果圖
- 在view中如何使用及分享個(gè)后臺(tái)方法
- 開(kāi)發(fā)者視角閱讀shenniu.pager.js代碼
下面一步一個(gè)腳印的來(lái)分享：
. 為什么采用js分頁(yè)及效果圖
首先，咋們來(lái)了解下市面上mvc兩種常用的分頁(yè)方式：跳轉(zhuǎn)分頁(yè)和ajax分頁(yè)；跳轉(zhuǎn)分頁(yè)意思就是頁(yè)面重定向到指定的頁(yè)面并通過(guò)傳遞分頁(yè)需要的參數(shù)，從而獲取數(shù)據(jù)后通過(guò)Modal來(lái)綁定數(shù)據(jù)，這個(gè)每次都會(huì)刷下頁(yè)面體驗(yàn)上不是很好；ajax分頁(yè)通過(guò)異步j(luò)s請(qǐng)求某個(gè)接口，然后從接口獲取到數(shù)據(jù)后，再賦值到展示的界面上，這種方式是不會(huì)刷新頁(yè)面，從而保證了用戶體驗(yàn)；
下面來(lái)看下這次分享的js分頁(yè)插件效果圖：
圖一：
圖二：
圖三：
看效果圖好像看不出來(lái)什么東西，我只能說(shuō)沒(méi)辦法，以后爭(zhēng)取弄個(gè)gif動(dòng)態(tài)圖片吧，后面代碼才是關(guān)鍵
. 在view中如何使用及分享個(gè)后臺(tái)方法
首先，為了頁(yè)面樣式好看我使用了bootstrap+ace樣式框架，樣式效果就是如上面幾張圖所示(這里是樣式和js文件)；由于該插件是采用jquery格式書(shū)寫(xiě)的所以需要引用jquery.js，如上面圖所示使用到了日期選擇框，因?yàn)槲也捎玫臉邮蕉际腔趆5的設(shè)計(jì)所以這里引用的日期選擇插件bootstrap-datepicker.min.js和她的樣式bootstrap-datepicker3.min.css；該實(shí)例需要的引用文件都好了，下面看下截圖：
再來(lái)，咋們就開(kāi)始使用shenniu.pager.js,我們需要在點(diǎn)擊“查詢(xún)”按鈕的時(shí)候去調(diào)用這個(gè)插件，然后通過(guò)插件去獲取后臺(tái)接口返回的數(shù)據(jù)，并綁定到頁(yè)面展示出來(lái)，所以有了如下代碼：
var snTool = new shenniuTool();
$("button[id='btnSearch']").on("click", function () {
var data = {
txtName: $("input[name='txtName']").val(),
nStatus: $("select option:selected").val(),
dOperateTime: $("input[name='dOperateTime']").val()
};
snTool.listFun({
showId: "divShowResult", //內(nèi)容顯示的div的Id
url: "/Menu/Search",
data: data,
pageSize: 2, //每頁(yè)N條
headText: [
{ nickName: "全選", name: "Id", colType: "checkbox" },
{ nickName: "名稱(chēng)", name: "Name", colType: "label", isModalHeadText: true },
{ nickName: "鏈接", name: "Link" },
{ nickName: "狀態(tài)", name: "EnableDes" },
{ nickName: "操作人", name: "OperatorDes" },
{ nickName: "操作時(shí)間", name: "OperateTime", format: "yyyy-MM-dd" },
{ nickName: "操作", name: "Id", colType: "operate" }
],
editeOption: {
url: "/Menu/Edit",
title: "編輯",
height: 500
},
viewOption: {
url: "/Menu/Details",
title: "查看",
height: 500
},
delOption: {
url: "/Menu/Delete",
title: "刪除",
height: 500
},
modalExt: modalExt
});
});
注意參數(shù)url: "/Menu/Search"，這個(gè)指向的就是后臺(tái)接口，那么咋們來(lái)看下我后臺(tái)咋們寫(xiě)的:
[HttpGet]
public JsonResult Search()
{
var moPageResult = new StageModel.MoPageResult<dynamic>();
try
{
var txtName = Request.Params["txtName"];
var nStatus = string.IsNullOrWhiteSpace(Request.Params["nStatus"]) ? -1 : Convert.ToInt32(Request.Params["nStatus"]);
var dOperateTime = string.IsNullOrWhiteSpace(Request.Params["dOperateTime"]) ? Convert.ToDateTime("1991-01-01") : Convert.ToDateTime(Request.Params["dOperateTime"]);
var data = db.MoMenus.AsQueryable();
if (!string.IsNullOrWhiteSpace(txtName))
{
data = data.Where(b => b.Name.Contains(txtName));
}
if (nStatus >= 0)
{
data = data.Where(b => b.IsEnable == (nStatus == (int)StageEnumHelper.ComStatus.啟用));
}
if (dOperateTime > Convert.ToDateTime("1991-01-01"))
{
data = data.Where(b => b.OperateTime >= dOperateTime && b.OperateTime < dOperateTime.AddDays(1));
}
moPageResult.MoPageContent(
data,
b => b.OperateTime,
b => new
{
Id = b.Id,
Name = b.Name,
Link = b.Link,
Des = b.Des,
IsEnable = b.IsEnable,
Operator = b.Operator,
OperatorDes = b.MoUserInfo.NickName,
EnableDes = b.IsEnable ? "啟用" : "禁用",
OperateTime = b.OperateTime
});
}
catch (Exception ex)
{
}
return Json(moPageResult, JsonRequestBehavior.AllowGet);
}
后臺(tái)接口Request.Params獲取的幾個(gè)參數(shù)就是從前端
var data = {
txtName: $("input[name='txtName']").val(),
nStatus: $("select option:selected").val(),
dOperateTime: $("input[name='dOperateTime']").val()
};
傳遞過(guò)來(lái)的，分別代碼了視圖中的名稱(chēng)，狀態(tài)，操作時(shí)間等查詢(xún)條件；下面來(lái)看下，后臺(tái)這兒沒(méi)有看到獲取類(lèi)似分頁(yè)的當(dāng)前頁(yè)數(shù)和分頁(yè)記錄數(shù)的操作，是封裝到了MoPageResult類(lèi)中的MoPageContent()中，來(lái)看下MoPageResult類(lèi)代碼如：
#region 分頁(yè)數(shù)據(jù)返回
public class MoPageResult<TResult> where TResult : class, new()
{
public MoPageResult()
{
}
public IQueryable<TResult> MoResult;
/// <summary>
/// 總頁(yè)數(shù)
/// </summary>
public int PageTotal { get; set; }
/// <summary>
/// 當(dāng)前頁(yè)數(shù)
/// </summary>
public int CurrentPage { get; set; }
/// <summary>
/// 分頁(yè)記錄數(shù)
/// </summary>
public int PageSize { get; set; }
/// <summary>
/// 分頁(yè)方法
/// </summary>
/// <typeparam name="TKey"></typeparam>
/// <param name="query"></param>
/// <param name="order_desc"></param>
public void MoPageContent<T, TKey>(IQueryable<T> query, Expression<Func<T, TKey>> desc, Expression<Func<T, TResult>> selector = null, bool isDesc = true) where T : class,new()
{
if (HttpContext.Current == null) { return; }
var Request = HttpContext.Current.Request;
this.PageSize = string.IsNullOrWhiteSpace(Request.Params["pageSize"]) ? 15 : Convert.ToInt32(Request.Params["pageSize"]);
this.CurrentPage = string.IsNullOrWhiteSpace(Request.Params["currentPage"]) ? 1 : Convert.ToInt32(Request.Params["currentPage"]);
var nTotal = query.Count();
this.PageTotal = nTotal / this.PageSize + (nTotal % this.PageSize > 0 ? 1 : 0);
if (selector != null)
{
if (isDesc)
{
query = query.OrderByDescending(desc);
}
else
{
query = query.OrderBy(desc);
}
this.MoResult = query.
Skip((this.CurrentPage - 1) * this.PageSize).
Take(this.PageSize).
Select(selector);
}
}
}
#endregion
MoPageContent()中默認(rèn)是獲取了pagesize，currentpage參數(shù)，這樣減少了用戶操作性，并且此方法承擔(dān)了計(jì)算總頁(yè)數(shù)和執(zhí)行分頁(yè)語(yǔ)句的角色，注意最后查詢(xún)語(yǔ)句Select(selector)，selector是Expression<Func<T, TResult>>類(lèi)型，這個(gè)T有條件約束where T : class,new()；我在調(diào)用該分頁(yè)類(lèi)的使用傳遞的T是dynamic，因?yàn)橘?lài)人如我覺(jué)得匿名類(lèi)更方便；唯一遺憾的是select輸出暫時(shí)無(wú)法直接對(duì)某個(gè)屬性直接使用方法；
最后，插件使用還需要注意一個(gè)地方，就是時(shí)間，如果后臺(tái)不處理時(shí)間直接DateTime的json格式化，那么在插件獲取出來(lái)的時(shí)間格式如：
這個(gè)時(shí)候就需要在使用shenniu.pager.js插件時(shí)候在屬性headText中，指定時(shí)間列的格式如：
{ nickName: "操作時(shí)間", name: "OperateTime", format: "yyyy-MM-dd" }
使用format格式化時(shí)間格式，這個(gè)插件兼容的給有：yyyy,MM,dd,HH,mm,ss，相信滿足大家需要了；
. 開(kāi)發(fā)者視角閱讀shenniu.pager.js代碼
首先，我們從上而下，映入眼簾的是插件屬性:
var defOption = {
showId: "divShowResult", //內(nèi)容顯示的div
url: "", //ajax數(shù)據(jù)來(lái)源地址
headText: [
{ nickName: "A", colType: "checkbox", name: "Id" },
{ nickName: "B", colType: "label", name: "Name", isModalHeadText: true } //isModalHeadText:是否是模式窗體頭部顯示的信息
],
data: {}, //查詢(xún)條件
editeOption: {
url: "",
title: "編輯",
width: 500,
height: 500
}, //編輯地址，不包括id
viewOption: {
url: "",
title: "查看",
width: 500,
height: 500
}, //查看地址
delOption: {
url: "",
title: "刪除",
width: 500,
height: 500
}, //刪除地址
currentPage: 1, //當(dāng)前頁(yè)數(shù)
pageSize: 15, //分頁(yè)記錄數(shù)
showPageTab: 6, //展示6個(gè)頁(yè)數(shù)
modalExt: null, //模式窗體對(duì)象
//可忽略
callback: function () { }, //回調(diào)函數(shù)
tabId: "tab001",
loading: "努力加載中，等會(huì)吧...", //可以直接寫(xiě)出<img src=''/>
sucFun: function (data) { },
befFun: function () { },
errFun: function () { },
comFun: function () { },
timeout: 60000 //超時(shí)60S
};
$.extend(defOption, option);
里面已經(jīng)包括了注釋說(shuō)明，看起來(lái)應(yīng)該不是問(wèn)題； $.extend(defOption, option); 這段代碼意思是吧用戶傳遞進(jìn)來(lái)的參數(shù)和插件里面默認(rèn)的參數(shù)合并，用戶大于插件直接可以覆蓋相同屬性的值；
再來(lái)，看請(qǐng)求后臺(tái)的方法：
//請(qǐng)求后臺(tái)
function ajaxFun(option) {
if (option) {
$.extend(defOption, option);
}
//獲取分頁(yè)參數(shù)
var hidPageSize = defOption.pageSize;
var hidCurrentPage = defOption.currentPage;
if ($("form input[name='pageSize']").val()) {
hidPageSize = $("form input[name='pageSize']").val();
}
if ($("form input[name='currentPage']").val()) {
hidCurrentPage = $("form input[name='currentPage']").val();
}
//合并用戶查詢(xún)條件和分頁(yè)參數(shù)條件
var searchData = {
pageSize: hidPageSize,
currentPage: hidCurrentPage
};
$.extend(searchData, defOption.data);
//請(qǐng)求后臺(tái)數(shù)據(jù)
$.ajax({
url: defOption.url,
type: "get",
data: searchData,
dataType: "json",
timeout: defOption.timeout,
async: true,
beforeSend: defOption.befFun,
success: defOption.sucFun,
});
}
這個(gè)方法就是請(qǐng)求接口獲取數(shù)據(jù)的方法，里面默認(rèn)獲取了頁(yè)面中的pageSize，currentPage兩個(gè)分頁(yè)所需要的參數(shù)，這里采用的是get方式來(lái)請(qǐng)求，當(dāng)然可以寫(xiě)成post，不過(guò)需要后臺(tái)支持post就行了；
我們?cè)倏?strong>查詢(xún)列表方法：
//查詢(xún)列表
listFun: function (option) {
if (option) {
$.extend(defOption, option);
}
//默認(rèn)格式
var tab = [];
tab.push('<table id="' + defOption.tabId + '" class="table table-bordered table-hover">');
tab.push('<thead><tr role="row">');
for (var i in defOption.headText) {
var head = defOption.headText[i];
if (head.colType == "label") {
tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>');
} else if (head.colType == "checkbox") {
tab.push('<th class="center " rowspan="1" colspan="1" aria-label="">');
tab.push(' <label class="pos-rel">');
tab.push(' <input type="checkbox" name="cbAll" class="ace">');
tab.push(' <span class="lbl">' + head.nickName + '</span>');
tab.push(' </label>');
tab.push('</th>');
} else {
tab.push('<th class="center" tabindex="0" rowspan="1" colspan="1">' + head.nickName + '</th>');
}
}
tab.push('</tr></thead>');
tab.push('<tbody><tr><td class="text-center" colspan="' + defOption.headText.length + '">' + defOption.loading + '</td></tr></tbody>');
tab.push('</table>');
tab.push('<div id="divPager" class="text-center"></div>');
$("#" + defOption.showId).html(tab.join(''));
//全選事件
$("input[type='checkbox'][name='cbAll']").on("click", function () {
var cbStatus = $(this).is(":checked");
if (cbStatus) {
$("input[name='cb']:checkbox").prop("checked", true);
} else {
$("input[name='cb']:checkbox").prop("checked", false);
}
});
//數(shù)據(jù)返回成功處理
defOption.sucFun = function (data) {
var head = $("table[id='" + defOption.tabId + "'] tbody");
if (data) {
if (data.MoResult) {
//遍歷table展示的數(shù)據(jù)
var rows = [];
$.each(data.MoResult, function (i, item) {
rows.push('<tr>');
var modalHeadText = "";
for (var h_i in defOption.headText) {
var head = defOption.headText[h_i];
var item_val = item[head.name];
if (item_val && typeof (item_val) != "undefined") { } else { item_val = ""; }
//時(shí)間格式化
if (head.format && item_val.length > 0) {
console.log(item_val);
var date = new Date(parseInt(item_val.replace("/Date(", "").replace(")/", ""), 10));
item_val = head.format.
replace("yyyy", date.getFullYear()).
replace("MM", date.getMonth() + 1).
replace("dd", date.getDate()).
replace("HH", date.getHours()).
replace("mm", date.getMinutes()).
replace("ss", date.getMilliseconds());
}
//獲取模式窗體頭部信息
if (modalHeadText.length <= 0) { modalHeadText = head.isModalHeadText ? item_val : "" };
if (head.colType == "label") {
rows.push('<td class="center">' + item_val + '</td>');
} else if (head.colType == "checkbox") {
rows.push('<td class="center">');
rows.push(' <label class="pos-rel">');
rows.push(' <input type="checkbox" name="cb" value="' + item_val + '" class="ace">');
rows.push(' <span class="lbl"></span>');
rows.push(' </label>');
rows.push('</td>');
} else if (head.colType == "operate") {
rows.push('<td class="center"><div class="hidden-sm hidden-xs action-buttons">');
if (defOption.editeOption.url.length > 0) {
var editOption = $.extend({}, defOption.editeOption);
editOption.url += "/" + item_val;
editOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
var op = JSON.stringify(editOption);
rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-pencil bigger-130"></i></a>');
}
if (defOption.viewOption.url.length > 0) {
var viewOption = $.extend({}, defOption.viewOption);
viewOption.url += "/" + item_val;
viewOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
var op = JSON.stringify(viewOption);
rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-search-plus bigger-130"></i></a>');
}
if (defOption.delOption.url.length > 0) {
var delOption = $.extend({}, defOption.delOption);
delOption.url += "/" + item_val;
delOption.title += modalHeadText.length > 0 ? "-" + modalHeadText : "";
var op = JSON.stringify(delOption);
rows.push('<a class="blue" data-item=\'' + op + '\' href="javascript:;"><i class="ace-icon fa fa-trash-o bigger-130"></i></a>');
}
rows.push('</div></td>');
}
else {
rows.push('<td class="center">' + item_val + '</td>');
}
}
rows.push('</tr>');
});
//頁(yè)數(shù)展示
if (data.MoResult.length > 0) {
var pager = [];
pager.push('<div class="text-center">');
pager.push(' <ul class="pagination" style="margin-top:0px">');
var nPager = defOption.showPageTab;//每次展示6個(gè)分頁(yè)
//上一頁(yè)
var nprev = (data.CurrentPage - 1 >= 1 ? data.CurrentPage - 1 : 1);
pager.push(' <li class="paginate_button previous" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_previous">');
pager.push(' <a href="javascript:;" name="npager" data-page="' + nprev + '">上一頁(yè)</a>');
pager.push(' </li>');
//當(dāng)前頁(yè)之前頁(yè)碼
var preTotal = data.CurrentPage - nPager >= 1 ? data.CurrentPage - nPager : 1;
for (var i = preTotal; i < data.CurrentPage ; i++) {
pager.push(' <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">');
pager.push(' <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>');
pager.push(' </li>');
}
//當(dāng)前頁(yè)
pager.push(' <li class="paginate_button active disabled" aria-controls="dynamic-table">');
pager.push(' <a href="javascript:;" name="npager" data-page="' + data.CurrentPage + '">' + data.CurrentPage + '</a>');
pager.push(' </li>');
//當(dāng)前頁(yè)以后頁(yè)碼
var nextTotal = data.CurrentPage + nPager > data.PageTotal ? data.PageTotal : data.CurrentPage + nPager;
for (var i = data.CurrentPage + 1; i <= nextTotal; i++) {
pager.push(' <li class="paginate_button ' + (i == data.CurrentPage ? "active disabled" : "") + '" aria-controls="dynamic-table">');
pager.push(' <a href="javascript:;" name="npager" data-page="' + i + '">' + i + '</a>');
pager.push(' </li>');
}
//下一頁(yè)
var nnext = (data.PageTotal < data.CurrentPage + 1 ? data.PageTotal : data.CurrentPage + 1);
pager.push(' <li class="paginate_button next" aria-controls="dynamic-table" tabindex="0" id="dynamic-table_next">');
pager.push(' <a href="javascript:;" name="npager" data-page="' + nnext + '">下一頁(yè)</a>');
pager.push(' </li>');
pager.push(' </ul>');
//分頁(yè)查詢(xún)條件
pager.push('<div style="display:none">');
pager.push(' <form>');
pager.push(' <input type="hidden" name="pageSize" value="' + defOption.pageSize + '"/>');
pager.push(' <input type="hidden" name="currentPage" value="' + defOption.currentPage + '"/>');
pager.push(' </form>');
pager.push('</div>');
pager.push('</div>');
//移除加載中
//head.html("");
//添加結(jié)果
head.html(rows.join(''));
$("div[id='divPager']").html(pager.join(''));
//操作按鈕事件
$("a[data-item]").on("click", function () {
var data_Item = $(this).attr("data-item");
if (data_Item) {
var data_Item_Obj = JSON.parse(data_Item);
defOption.modalExt.modalFun({
width: data_Item_Obj.width,
height: data_Item_Obj.height,
url: data_Item_Obj.url,
title: data_Item_Obj.title,
callback: defOption.callback
});
}
});
//綁定分頁(yè)按鈕事件
$("a[name='npager']").on("click", function () {
var nPager = $(this).attr("data-page");
if (nPager.length <= 0) { return; }
$("form input[name='currentPage']").val(nPager);
//執(zhí)行請(qǐng)求后臺(tái)
ajaxFun(defOption);
});
} else {
head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢(xún)到數(shù)據(jù)！</td></tr>");
$("div[id='divPager']").html("");
}
} else {
head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢(xún)到數(shù)據(jù)。</td></tr>");
$("div[id='divPager']").html("");
}
} else {
head.html("<tr><td class=\"text-center\" colspan=\"" + defOption.headText.length + "\">未能查詢(xún)到數(shù)據(jù)</td></tr>");
$("div[id='divPager']").html("");
}
};
if (option) {
$.extend(defOption, option);
}
//執(zhí)行請(qǐng)求后臺(tái)
ajaxFun(defOption);
}
這個(gè)方法體挺長(zhǎng)的，主要操作是：
默認(rèn)格式展示列表頭部并呈現(xiàn)出加載中的提示=》綁定復(fù)選框全選事件=》創(chuàng)建數(shù)據(jù)返回成功函數(shù)sucFun()=》調(diào)用請(qǐng)求后臺(tái)方法ajaxFun()；
再來(lái)看函數(shù)sucFun()等到數(shù)據(jù)返回后執(zhí)行的操作是：
遍歷json返回?cái)?shù)據(jù)展示到table中(其中包括了時(shí)間格式化的處理，復(fù)選框，label及操作按鈕類(lèi)型operate的初始化)=》頁(yè)數(shù)展示及事件綁定(目前只有上一頁(yè)，當(dāng)前頁(yè)之前頁(yè)碼，當(dāng)前頁(yè)，當(dāng)前頁(yè)以后頁(yè)碼，下一頁(yè)的效果展示，分頁(yè)查詢(xún)條件(生成pagesize和currentPage隱藏控件)，綁定分頁(yè)按鈕事件)
以上就是shenniu.pager.js整個(gè)插件內(nèi)容，不多且清晰，感覺(jué)分享給大家挺高興，下面貼出示例中用到的js文件和css文件可以在這里下載：http://xiazai.jb51.net/201612/yuanma/shenniu.pager_jb51.rar
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
- jquery.pager.js分頁(yè)實(shí)現(xiàn)詳解
- jquery.pager.js實(shí)現(xiàn)分頁(yè)效果
- 用jQuery中的ajax分頁(yè)實(shí)現(xiàn)代碼
- JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼
- 基于jQuery的實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)控件
- 基于JQuery的Pager分頁(yè)器實(shí)現(xiàn)代碼
- jQuery中jqGrid分頁(yè)實(shí)現(xiàn)代碼
- jQuery DataTables插件自定義Ajax分頁(yè)實(shí)例解析
- jquery pagination插件實(shí)現(xiàn)無(wú)刷新分頁(yè)代碼
- jquery向上向下取整適合分頁(yè)查詢(xún)
- jQuery pager.js 插件動(dòng)態(tài)分頁(yè)功能實(shí)例分析
相關(guān)文章
在Mac、Ubuntu、Windows、Centos下如何安裝Node.js，想必有一些朋友還不會(huì)吧，本文整理了一些，需要的朋友可以參考下2013-11-11
這篇文章主要為大家詳細(xì)介紹了利用js canvas實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了第六篇Bootstrap表格樣式介紹的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
javascript多行字符串的簡(jiǎn)單實(shí)現(xiàn)方式
之前我們給大家講訴過(guò)javascript多行字符串的7種解決辦法，今天來(lái)給大家分享一個(gè)更簡(jiǎn)單的方法，非常的實(shí)用，大家一定要仔細(xì)看看哦。2015-05-05
這篇文章主要介紹了js如何實(shí)現(xiàn)日歷，幫助大家完成需求，提高對(duì)js的理解，感興趣的朋友可以了解下2020-11-11
Opacity.js...2007-01-01
JS模擬實(shí)現(xiàn)ECMAScript5新增的數(shù)組方法
ECMAScript5 新增了十個(gè)數(shù)組方法，這些方法只有在ie9及以上瀏覽器中可以被使用，下面是對(duì)于這些方法的模擬實(shí)現(xiàn)簡(jiǎn)單介紹下，需要的朋友參考下2017-03-03
如何通過(guò)js實(shí)現(xiàn)圖片預(yù)覽功能【附實(shí)例代碼】
如何通過(guò)js實(shí)現(xiàn)圖片預(yù)覽功能呢？下面小編就為大家?guī)?lái)一篇用js實(shí)現(xiàn)圖片預(yù)覽功能。給大家做個(gè)參考吧，一起跟隨小編過(guò)來(lái)看看2016-03-03
這篇文章主要為大家介紹了uniapp微信小程序強(qiáng)制更新解決的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)自定義滾動(dòng)條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07