JQuery分页插件bs_pagination的应用

一、引入bs_pagination的js文件以及样式文件（项目中需要引用Jquery和bootstrap的相关js和样式文件，且在以下引用之前）：

   <link href="~/Scripts/bs_paginationJS/jquery.bs_pagination.min.css" rel="stylesheet" />
   <script src="~/Scripts/bs_paginationJS/jquery.bs_pagination.js"></script>
   <script src="~/Scripts/bs_paginationJS/zh.js" charset="gbk"></script>

二、页面body中的代码：

 <div class="row">
     <table class="TB1">
         <tbody>
             <tr>
                 <td class="td-left-title edu_width100">
                     <b>仪器价值（万元）：</b>
                 </td>
                 <td>
                     <input type="text" class="scinputsm" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" id="MinCost" name="MinCost">~
                     <input type="text" class="scinputsm" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" id="MaxCost" name="MaxCost">
                 </td>
                 <td class="td-left-title edu_width100">
                     <b>仪器名称：</b>
                 </td>
                 <td>
                     <input type="text" class="scinputsm" onafterpaste="this.value=this.value.replace(/\s/g,'')" onkeyup="this.value=this.value.replace(/\s/g,'')" id="InstrumentName" name="InstrumentName">
                 </td>
                 <td class="td-left-title edu_width100">
                     <b>规格型号：</b>
                 </td>
                 <td>
                     <input type="text" class="scinputsm" onafterpaste="this.value=this.value.replace(/\s/g,'')" onkeyup="this.value=this.value.replace(/\s/g,'')" id="SpecificationModel" name="SpecificationModel">
                 </td>
             </tr>
         </tbody>
     </table>
     <input type="button" onclick="searchData()" value="查询" />
     <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
     <div id="page-content">
         @Html.Partial("TestPartialView")
     </div>
     <div id="mypagination">
     </div>
 </div>

三、javascript代码：

  function searchData() {
         //销毁分页
         $("#mypagination").bs_pagination('destroy');

         //点击查询重新初始化分页
         $("#mypagination").bs_pagination({
             // 参数
             currentPage: 1,
             rowsPerPage: 10,
             maxRowsPerPage: 100,
             totalRows:25,
             totalPages: 10,

             visiblePageLinks: 5,

             showGoToPage: true,
             showRowsPerPage: true,
             showRowsInfo: false,
             showRowsDefaultInfo: false,

             onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked
                 loadData();
             },
             onLoad: function (event, data) { // returns page_num and rows_per_page on plugin load
                 loadData();
             }
         });
     }

     /*
     * 页面加载初始化分页
     */
     $("#mypagination").bs_pagination({
         // 参数
         currentPage: 1,
         rowsPerPage: 10,
         maxRowsPerPage: 100,
         totalPages: 20,
         totalRows: 0,

         visiblePageLinks: 5,

         showGoToPage: true,
         showRowsPerPage: true,
         showRowsInfo: false,
         showRowsDefaultInfo: false,

         onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked
             loadData();
         },
         onLoad: function (event, data) { // returns page_num and rows_per_page on plugin load
             debugger;
             alert(data.currentPage);
             loadData();
         }
     });

     function loadData() {
         $.ajax({
             url: '/Home/TestPartialView',
             type: 'post',
             dataType: 'html',
             //data.currentPage:当前页码，data.rowsPerPage：每页条数
             data: { 'currentPage': data.currentPage, 'rowsPerPage': data.rowsPerPage },
             success: function (result) {
                 $("#page-content").html(result);
             },
             error: function () {
                 alert("程序异常,获取数据失败！");
             }
         })
     }

使用小结：

1.中文添加到js文件中时页面显示乱码：

在js引入时加入 charset="gbk"

   <script src="~/Scripts/bs_paginationJS/zh.js" charset="gbk"></script>

四、默认参数：

    var default_settings = {
        currentPage: 1,
        rowsPerPage: 10,
        maxRowsPerPage: 100,
        totalPages: 100,
        totalRows: 0, 

        visiblePageLinks: 5, 

        showGoToPage: true,
        showRowsPerPage: true,
        showRowsInfo: true,
        showRowsDefaultInfo: true, 

        directURL: false, // or a function with current page as argument
        disableTextSelectionInNavPane: true, // disable text selection and double click 

        bootstrap_version: "3", 

        // bootstrap 3
        containerClass: "well", 

        mainWrapperClass: "row", 

        navListContainerClass: "col-xs-12 col-sm-12 col-md-6",
        navListWrapperClass: "",
        navListClass: "pagination pagination_custom",
        navListActiveItemClass: "active", 

        navGoToPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space",
        navGoToPageIconClass: "glyphicon glyphicon-arrow-right",
        navGoToPageClass: "form-control small-input", 

        navRowsPerPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space",
        navRowsPerPageIconClass: "glyphicon glyphicon-th-list",
        navRowsPerPageClass: "form-control small-input", 

        navInfoContainerClass: "col-xs-12 col-sm-4 col-md-2 row-space",
        navInfoClass: "", 

        // element IDs
        nav_list_id_prefix: "nav_list_",
        nav_top_id_prefix: "top_",
        nav_prev_id_prefix: "prev_",
        nav_item_id_prefix: "nav_item_",
        nav_next_id_prefix: "next_",
        nav_last_id_prefix: "last_", 

        nav_goto_page_id_prefix: "goto_page_",
        nav_rows_per_page_id_prefix: "rows_per_page_",
        nav_rows_info_id_prefix: "rows_info_", 

        onChangePage: function() { // returns page_num and rows_per_page after a link has clicked
        },
        onLoad: function() { // returns page_num and rows_per_page on plugin load
        }
    } 

五、方法：

var version = $("#element_id").bs_pagination('getVersion');
$("#element_id").bs_pagination('getDefaults');
$("#element_id").bs_pagination('getOption', 'option_name');
$("#element_id").bs_pagination('getAllOptions');
$("#element_id").bs_pagination('destroy');
$("#element_id").bs_pagination('setRowsInfo', 'info_html');

六、事件：

//onChangePage
$("#element_id").bs_pagination({
  onChangePage: function(event, data) {
    // your code here e.g.
    console.log('Current page is: ' + currentPage.col + '. ' + rowsPerPage + ' are displayed per page.');
  }
});

//onLoad
$("#element_id").bs_pagination({
  onLoad: function(event, data) {
    // your code here e.g.
    console.log('Current page is: ' + currentPage.col + '. ' + rowsPerPage + ' are displayed per page.');
  }
});