您好,登錄后才能下訂單哦!
小編這次要給大家分享的是如何使用jQuery插件simplePagination,文章內(nèi)容豐富,感興趣的小伙伴可以來了解一下,希望大家閱讀完這篇文章之后能夠有所收獲。
正在熟悉項(xiàng)目上的代碼,新添加了一個(gè)需要,需要對(duì)表單進(jìn)行分頁,之前的代碼中是有分頁的代碼的,看了老半天,也沒看太明白。之前的項(xiàng)目比較久遠(yuǎn),繼續(xù)熟悉代碼。
HTML頁面,
<div class="row"> <div class="col-sm-12 col-sm-12"> <table class="table table-striped table-hover table-bordered" data-toggle="table" data-url="data2.json" data-pagination="true"> <thead> <tr> <th data-hide="phone" >可用區(qū)</th> <th data-hide="phone">渠道</th> <th data-hide="phone">引用可用區(qū)</th> <th data-hide="phone">引用渠道</th> </tr> </thead> <tbody id="region_price_list-data"> </tbody> </table> </div> </div> <div class="row"> <div class="col-sm-12"> <div id="pagination"> </div> </div> </div>
因?yàn)轫?xiàng)目里用到EJS--HTML模板,記得在一開始就引用SimplePagination插件,這個(gè)比較簡(jiǎn)單,就不細(xì)說了。
var page_count = 0; // 定義分頁的頁數(shù) var limit = 0 ; // 定義分頁的條數(shù) var regionLogListFunc = function(pageNumber){ if(pageNumber=== undefined){ pageNumber = 1; } // 頁數(shù)判斷和定義 $get("/regionCopyList?page_number="+ pageNumber,function(data,status){ var #### = jQuery("####-##"); // 獲取Table中 tbody的id值 var updateRegionlogList = '' // for in 遍歷 對(duì)傳入的數(shù)據(jù)進(jìn)行顯示 for (var i in data){ #### +='<tr class= "odd gradeX">'; ##### +='<td data-hide ="phone">'+data[i].##+'</td>'; ##### +='<td data-hide ="phone">'+data[i].##'</td>'; #### +='<td data-hide ="phone">'+data[i].##+'</td>'; #### +='<td data-hide ="phone">'+data[i].##+'</td>'; updateRegionlogList +='</tr>'; } regionPriceList.empty(); // 添加更新的數(shù)據(jù) regionPriceList.append(updateRegionlogList); }); var onPageClick = regionLogListFunc; // 獲取DOM文檔ID jQuery("#pagination").pagination({ item :<%=z###%>, //ejs模板 itemsOnPage :<%=#####t%> ,//ejs模板 cssStyle :'light-theme', onPageClick :onPageClick, onInit :regionLogListFunc, }); });
另外一種寫法是
var page_index; var itemsOnPage = 1; $(function() { $("#pagination").pagination({ items: {$page_count}, 總頁數(shù) itemsOnPage: itemsOnPage, cssStyle: 'light-theme', onInit: changePage, // 初始化函數(shù) onPageClick: changePage //點(diǎn)擊時(shí)觸發(fā)函數(shù) }); }); function changePage(page_index,event){ listTable.gotoPage(page_index); //gotoPage函數(shù)調(diào)用ajax獲取數(shù)據(jù) 填充頁面 document.getElementById('pageCurrent').innerHTML=page_index; return true; }
看完這篇關(guān)于如何使用jQuery插件simplePagination的文章,如果覺得文章內(nèi)容寫得不錯(cuò)的話,可以把它分享出去給更多人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。