Rumah > hujung hadapan web > tutorial js > twbsPagination.js分页插件的使用详细介绍

twbsPagination.js分页插件的使用详细介绍

黄舟
Lepaskan: 2017-10-21 10:16:43
asal
3528 orang telah melayarinya

项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把。其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来:

1、分页插件引入html中需要:

bootstrap.css

分页插件js

自己写的分页的样式css【如果不用,也可以直接用bootstrap所带的分页css。】

使用jquery可以引入jquery.js

html中:

1 <script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>
2 <link rel="stylesheet" href="<c:url value="/content/common/css/bootstrap.min.css"/>" />
3 <link rel="stylesheet" href="<c:url value="/content/common/css/pagination.css"/>" />
Salin selepas log masuk

2、分页插件使用时:

可以定义一个专门页面转换的方法,引入使用:

html中:


1 <ul id="pagination" class="pagination">
2 </ul>
Salin selepas log masuk

js中:

managementPage:function (pagesize) {
    var obj = $(&#39;#managePagination&#39;).twbsPagination({
        totalPages: pagesize,//总页数
        startPage: 1,//起始页
        visiblePages: pagesize>5?5:pagesize,//展示页数,超出5页展示5页,未超出时展示总页数
        initiateStartPageClick: true,
        hideOnlyOnePage: true,//只有一页时不展示分页
        onPageClick:function (event,page) {//点击页面事件,回调函数,只能使用ajax异步加载,暂时未发现能够直接在前端操作data的方法。
            $(this).addClass("active").siblings().removeClass("active");

            var start = (page - 1)*5+1;
            var end = page*5+1;
            var param = {
                &#39;start&#39;:start,
                &#39;end&#39;:end
            };
            ds.manageSystem(manageSystemUrl,param);//异步加载的方法,主要需要将起始页与结束页带回后台
        }
    });
    obj.data();//加载分页样式
},
Salin selepas log masuk

3、注意:分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现,则需要引用以下代码:

1 //页面重载时置空分页数据(属于分页插件)
2 $(&#39;#managePagination&#39;).empty();
3 $(&#39;#managePagination&#39;).removeData("twbs-pagination");
4 $(&#39;#managePagination&#39;).unbind(&#39;page&#39;);
Salin selepas log masuk

这段代码放入的地方也有讲究,需要放在即将异步加载的数据之前,先异步加载的数据一步清空分页插件,此时再次加载的分页数据才是新的数据内容。

4、分页插件基本使用以上代码便可全部满足。

Atas ialah kandungan terperinci twbsPagination.js分页插件的使用详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan