jQuery分頁插件:JqueryPagination

jopen 9年前發布 | 28K 次閱讀 jQuery Ajax框架 JqueryPagination

JqueryPagination是一個輕量級的jQuery分頁插件。只需幾個簡單的配置就可以生成分頁控件。并且支持ajax獲取數據,自定義請求參數,提供多種方法,事件和回調函數,功能全面的分頁插件。

Option


</tr> </tbody>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr> </tbody> </table>

 <link href="jquery.pagination.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery.pagination.js"></script>
<!-- HTML -->
<div id="page" class="m-pagination"></div>
<!-- JavaScript -->
<script type="text/javascript">
    $("#page").page({
        showInfo: true,
        showJump: true,
        showPageSizes: true,
        remote: {
            url: '/GetPageData',
            beforeSend: function(XMLHttpRequest){
                //...
            },
            success: function (data, pageIndex) {
                $("#eventLog").append('pageIndex : ' + pageIndex + ' ,  remote callback : '

                + JSON.stringify(data) + '<br />');
        },
        complete: function(XMLHttpRequest, textStatu){
            //...
        }
    }
 }).on("pageClicked", function (event, pageIndex) {
     $("#eventLog").append('EventName = pageClicked , pageIndex = ' + pageIndex + '<br />');
 }).on('jumpClicked', function (event, pageIndex) {
     $("#eventLog").append('EventName = jumpClicked , pageIndex = ' + pageIndex + '<br />');
 }).on('pageSizeChanged', function (event, pageSize) {
     $("#eventLog").append('EventName = pageSizeChanged , pageSize = ' + pageSize + '<br />');
 });

</script> </pre>

項目主頁:http://www.baiduhome.net/lib/view/home/1434269411652

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
參數 數據類型 默認值 dataAPI 描述
total number 0 data-total 總數據數
pageSize number 10 data-page-size 每頁顯示數據條數
pageBtnCount number 11 data-page-btn-count 顯示分頁按鈕數量(推薦設置奇數)
showFirstLastBtn boolean true data-show-first-last-btn 是否顯示首頁和尾頁
firstBtnText string null data-first-btn-text 自定義首頁按鈕顯示內容
lastBtnText string null data-last-btn-text 自定義尾頁按鈕顯示內容
prevBtnText string ? data-prev-btn-text 自定義上一頁按鈕顯示內容
nextBtnText string ? data-next-btn-text 自定義下一頁按鈕顯示內容
loadFirstPage boolean true data-load-first-page 是否加載第一頁數據(如果設置為false,需傳入total)
showInfo boolean false data-show-info 是否顯示分頁信息
infoFormat string {start} ~ {end} of {total} entires data-info-format 自定義分頁信息({start},{end},{total}會替換成對應數值)
showJump boolean false data-show-jump 是否顯示跳轉按鈕
jumpBtnText string Go data-jump-btn-text 跳轉按鈕顯示內容
showPageSizes boolean false data-show-page-sizes 是否顯示每頁數據數按鈕
pageSizeItems array [5, 10, 15, 20] data-page-size-items 自定義每頁數據數
remote object
null ajax獲取數據配置
  • sesese色