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.');
}
});
JQuery分页插件bs_pagination的应用的更多相关文章
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- 20个jQuery分页插件和教程
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 自己diy一个jquery分页插件
js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...
随机推荐
- MongoDB在Windows下安装及配置
第一步 下载MongoDB http://www.mongodb.org/downloads 第二步 解压到D:\mongodb\目录下,为了命令行的方便,可以把D:\mongodb\bin加到系统环 ...
- magento性能优化
magento性能优化 14个快速加载web页面的技巧: 减少HTTP请求数使用CDN增加过期头信息gzip压缩传输内容将css样式表放在页首将js文件放在页尾不使用css表达式尽量少用内联式的css ...
- JS删除HTML元素问题
<div id='one'> <div>1</div> <div>2</div> </div> <div id=" ...
- Linux性能监控
转自:http://blog.csdn.net/chosen0ne/article/details/8200737 linux性能监控,就是要监控系统的各个子系统是否正常.linux主要的子系统包括: ...
- Oracle PL/SQL高级应用 游标
游标可以处理SQL语句查询出来的结果集,进行逐条控制,其实游标在内存中申请空间,将自己指向SQL语句查询出来的结果集,有点像指针的感觉,游标使SQL更加的灵活. DECLARE CURSOR mycu ...
- JavaScript中递归函数用法需要注意的
<script> function sum(num){ if(num<=1){ return 1; }else{ return num*sum(num-1);//return num ...
- python字典中的元素类型
python字典默认的是string item={"browser " : 'webdriver.irefox()', 'url' : 'http://xxx.com'} 如果这样 ...
- 六 GPU 并行优化的几种典型策略
前言 如何对现有的程序进行并行优化,是 GPU 并行编程技术最为关注的实际问题.本文将提供几种优化的思路,为程序并行优化指明道路方向. 优化前准备 首先,要明确优化的目标 - 是要将程序提速 2 倍? ...
- 无线路由器wds桥接技术+丢包率
半根毛线http://www.cnblogs.com/hsd-/ 今天下午鼓捣了一下无线路由的wds桥接 算是计算机网络的作业 码来分享一下 1.首先设置主路由 我的主路由是斐讯4线 路由ip为192 ...
- 最短路径--SPFA 算法
适用范围:给定的图存在负权边,这时类似Dijkstra等算法便没有了用武之地,而Bellman-Ford算法的复杂度又过高,SPFA算法便派上用场了. 我们约定有向加权图G不存在负权回路,即最短路径一 ...