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中的代码：
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,'')" name="MinCost">~
10 <input type="text" class="scinputsm" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')" 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,'')" 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,'')" 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 >
30 @Html.Partial("TestPartialView")
31 </div>
32 <div >
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.');
}
});