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