小編這次要給大家分享的是如何使用jQuery插件simplePagination，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
正在熟悉項目上的代碼，新添加了一個需要，需要對表單進行分頁，之前的代碼中是有分頁的代碼的，看了老半天，也沒看太明白。之前的項目比較久遠，繼續熟悉代碼。
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" >可用區</th>
<th data-hide="phone">渠道</th>
<th data-hide="phone">引用可用區</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>因為項目里用到EJS--HTML模板，記得在一開始就引用SimplePagination插件，這個比較簡單，就不細說了。
var page_count = 0;
// 定義分頁的頁數
var limit = 0 ;
// 定義分頁的條數
var regionLogListFunc = function(pageNumber){
if(pageNumber=== undefined){
pageNumber = 1;
}
// 頁數判斷和定義
$get("/regionCopyList?page_number="+ pageNumber,function(data,status){
var #### = jQuery("####-##");
// 獲取Table中 tbody的id值
var updateRegionlogList = ''
// for in 遍歷 對傳入的數據進行顯示
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();
// 添加更新的數據
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}, 總頁數
itemsOnPage: itemsOnPage,
cssStyle: 'light-theme',
onInit: changePage, // 初始化函數
onPageClick: changePage //點擊時觸發函數
});
});
function changePage(page_index,event){
listTable.gotoPage(page_index); //gotoPage函數調用ajax獲取數據 填充頁面
document.getElementById('pageCurrent').innerHTML=page_index;
return true;
}看完這篇關于如何使用jQuery插件simplePagination的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
