JQuery分页插件bs_pagination的应用

时间:2022-12-09 16:05:21

一、引入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中的代码:

 1 <div class="row">
 2     <table class="TB1">
 3         <tbody>
 4             <tr>
 5                 <td class="td-left-title edu_width100">
 6                     <b>仪器价值(万元):</b>
 7                 </td>
 8                 <td>
 9                     <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">~
10                     <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">
11                 </td>
12                 <td class="td-left-title edu_width100">
13                     <b>仪器名称:</b>
14                 </td>
15                 <td>
16                     <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">
17                 </td>
18                 <td class="td-left-title edu_width100">
19                     <b>规格型号:</b>
20                 </td>
21                 <td>
22                     <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">
23                 </td>
24             </tr>
25         </tbody>
26     </table>
27     <input type="button" onclick="searchData()" value="查询" />
28     <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
29     <div id="page-content">
30         @Html.Partial("TestPartialView")
31     </div>
32     <div id="mypagination">
33     </div>
34 </div>

 

三、javascript代码:

 1  function searchData() {
 2         //销毁分页
 3         $("#mypagination").bs_pagination('destroy');
 4         
 5         //点击查询重新初始化分页
 6         $("#mypagination").bs_pagination({
 7             // 参数
 8             currentPage: 1,
 9             rowsPerPage: 10,
10             maxRowsPerPage: 100,
11             totalRows:25,
12             totalPages: 10,
13 
14             visiblePageLinks: 5,
15 
16             showGoToPage: true,
17             showRowsPerPage: true,
18             showRowsInfo: false,
19             showRowsDefaultInfo: false,
20 
21             onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked
22                 loadData();
23             },
24             onLoad: function (event, data) { // returns page_num and rows_per_page on plugin load
25                 loadData();
26             }
27         });
28     }
29 
30     /*
31     * 页面加载初始化分页
32     */
33     $("#mypagination").bs_pagination({
34         // 参数
35         currentPage: 1,
36         rowsPerPage: 10,
37         maxRowsPerPage: 100,
38         totalPages: 20,
39         totalRows: 0,
40 
41         visiblePageLinks: 5,
42 
43         showGoToPage: true,
44         showRowsPerPage: true,
45         showRowsInfo: false,
46         showRowsDefaultInfo: false,
47 
48         onChangePage: function (event, data) { // returns page_num and rows_per_page after a link has clicked
49             loadData();
50         },
51         onLoad: function (event, data) { // returns page_num and rows_per_page on plugin load
52             debugger;
53             alert(data.currentPage);
54             loadData();
55         }
56     });
57 
58     function loadData() {
59         $.ajax({
60             url: '/Home/TestPartialView',
61             type: 'post',
62             dataType: 'html',
63             //data.currentPage:当前页码,data.rowsPerPage:每页条数
64             data: { 'currentPage': data.currentPage, 'rowsPerPage': data.rowsPerPage },
65             success: function (result) {
66                 $("#page-content").html(result);
67             },
68             error: function () {
69                 alert("程序异常,获取数据失败!");
70             }
71         })
72     }

使用小结:

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.');
  }
});