一、引入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.');
}
});