使用步骤

1、引入以下的js和css文件

<link rel="stylesheet" type="text/css" href="css/jquery.jui_pagination.css">

<link rel="stylesheet" type="text/css" href="themes/dot-luv/jquery-ui.css">

<!-- CUSTOM CLASSES -->

<link rel="stylesheet" href="css/index.css">

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript" src="js/jquery-ui.min.js"></script>

<!-- IF TOUCH EVENT SUPPORT IS NEEDED (MOBILE DEVICES) -->

<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="js/jquery.jui_pagination.min.js"></script>

<script type="text/javascript" src="localization/en.js"></script>

2、在head标签中加入以下js代码

<script type="text/javascript">

    $(function () {

        $("#demo_pag1").jui_pagination({

            currentPage: 8,

            visiblePageLinks: 5,

            totalPages: 103,

            containerClass: 'container1',

  

            useSlider: true,

            sliderInsidePane: true,

            sliderClass: 'slider1',

  

            disableSelectionNavPane: true,

  

            navRowsPerPageClass: 'rows-per-page1  ui-state-default ui-corner-all',

            navGoToPageClass: 'goto-page1 ui-state-default ui-corner-all',

  

            onChangePage: function (event, page_num) {

                if (isNaN(page_num) || page_num <= 0) {

                    alert('Invalid page' + ' (' + page_num + ')');

                } else {

                    $("#result").html('Page changed to: ' + page_num);

                }

            },

            onSetRowsPerPage: function (event, rpp) {

                if (isNaN(rpp) || rpp <= 0) {

                    alert('Invalid rows per page' + ' (' + rpp + ')');

                } else {

                    alert('rows per page successfully changed' + ' (' + rpp + ')');

                    $(this).jui_pagination({

                        rowsPerPage: rpp

                    })

                }

            },

            onDisplay: function () {

                var showRowsInfo = $(this).jui_pagination('getOption', 'showRowsInfo');

                if (showRowsInfo) {

                    var prefix = $(this).jui_pagination('getOption', 'nav_rows_info_id_prefix');

                    $("#" + prefix + $(this).attr("id")).text('Total rows: XXX');

                }

            }

        });

  

        $("#result").html('Current page is: ' + $("#demo_pag1").jui_pagination('getOption', 'currentPage'));

  

    });

</script>