分頁外掛程式jquery.simplePagination.js使用

標籤：

利用ecshop後台，利用外掛程式更改分頁顯示樣式遇到的問題，由於是利用Ajax擷取資料進行頁面資料更新？所以出現了以下情況：

初始化頁面前 ：                                                                                                                                  

    分頁更新後：

點擊後出現了分頁外掛程式內容消失，

原因：分頁一欄在AJax更新表格裡(而外掛程式寫在外面，初始化頁面顯示)，更新資料後，重新填充表格，所以分頁外掛程式內容沒有被插入進去，因而不顯示

　　調取query更新需要返回的內容，只更新table裡的資料內容

解決辦法：

　　把分頁外掛程式寫在Ajax更新資料外面，或寫在裡面同時更新

  把分頁欄 <div >{include file="page_new.htm"}</div> 放到更新table外面

 

外掛程式使用：

匯入css/js檔案

<link rel="stylesheet" type="text/css" href="../js/Pagination/css/css.css" /><link rel="stylesheet" type="text/css" href="../js/Pagination/css/simplePagination.css" />{insert_scripts files="../js/Pagination/js/jquery.min.js"}{insert_scripts files="../js/Pagination/js/jquery.simplePagination.js"}{insert_scripts files="../js/Pagination/js/index.js"}

調用：

<script style="text/javascript">var page_index;var itemsOnPage = 1;$(function() {$("#light-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; 
} </script>

 

分頁外掛程式jquery.simplePagination.js使用