正文

bootstrap-paginator分页控件的使用(代码片段)

sthu  sthu  2022-12-03  410

关键词：

首先对js和css的引用

初始化分页控件

　　<div id="page"></div>
　　<script type="text/javascript">
       $(function()
           var options=
               bootstrapMajorVersion:1,   //版本
               currentPage:1,   //当前页数
               numberOfPages:5,   //最多显示Page页
               totalPages:10,   //所有数据可以显示的页数
               onPageClicked:function(e,originalEvent,type,page)

           $("#page").bootstrapPaginator(options);
       )
   </script>

如果bootstrapMajorVersion:1 时，则上面的分页标签用 div

如果bootstrapMajorVersion:3 时，则上面的分页标签用 ul

其中：currentPage 是当前你所在的页数　　numberOfPages 是分页按钮可见的最多数　　totalPages 是所有数据能分的页数（这些 options（选项）是在初始化分页控件的时候使用的。）

在onPageClicked 事件中 page 参数标识你点击页数时所在的页数。

完整代码如下：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="reference/bootstrap/css/bootstrap.min.css"/> 
    <script type="text/javascript" src="reference/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="reference/bootstrap-paginator.js"></script>
</head>
<body>
    <div id="page"></div>

    <script type="text/javascript">
        $(function()
            var options=
                bootstrapMajorVersion:1,    //版本
                currentPage:1,    //当前页数
                numberOfPages:5,    //最多显示Page页
                totalPages:10,    //所有数据可以显示的页数
                onPageClicked:function(e,originalEvent,type,page)
                    console.log("e");
                    console.log(e);
                    console.log("originalEvent");
                    console.log(originalEvent);
                    console.log("type");
                    console.log(type);
                    console.log("page");
                    console.log(page);
                
            
            $("#page").bootstrapPaginator(options);
        )
    </script>
</body>
</html>

bootstrap-paginator+json+java+ajax实现新闻分页，并能翻页和定位到哪一页，点击跳转

现在用bootstrap做了个站，但是新闻模块的展示部分搞不出来，求大侠指教参考技术A我给你个项目例子吧！追问能不能发我邮箱呢，百度知道老是提示“知道已支持文件上传、下载功能。知道网友会将您需要的文件上传到知道，... 查看详情

如何使用bootstrap实现分页及翻页

...hub上便有这个的开源项目提供下载：https://github.com/lyonlai/bootstrap-paginator首先视图的上面应该需要引入js和css文件，主要有三个文件，分别是bootstrap的css，jquery以及Paginator的js文件。其中网上搜到，貌似jquery必须要1.8版本以上，这... 查看详情

如何防止 Bootstrap-Vue 分页自动重置

...再做同样的事情了。在其中一个上，我有一个表，我使用bootstrap-pagination组件进行分页，因此当用户更改页面时，我将请求发送到查看详情

分页控件

模板模板1：天地-地图右侧小分页控件//Html<divdojoType="bootstrap.layout.Pagination"showPageSize=0 pageSize="20"pageModel="20" dojoAttachPoint="wfrmPage"></div>//Js//查询之后，给分页控件赋值varpageItem=;pag 查看详情

分页控件以及分页控件风格

原文发布时间为：2009-05-22——来源于本人的百度文章[由搬家工具导入]分页控件以及风格源代码:http://download.csdn.net/source/1340238右击工具& 查看详情

jqgrid分页控件

工作中为了，处理分页问题，使用了两种分页控件，一种是处理表格的jqgrid控件，一种是自定义的jquery.page.js。 jqgrid(http://blog.mn886.net/jqGrid/ 中文的控件教程，https://github.com/tonytomov/jqGrid这是控件的github) &... 查看详情

c#winform分页控件怎么添加

参考技术A可以用GridView控件或者DataList，都可以实现分页功能参考技术B应该没有现成的分页控件吧，需要自己做一个控件查看详情

lua分页控件创建

查看详情

wpf分页控件(代码片段)

最近要写个程序要用到分页控件，找到了很多好高级的，代码拿到了也看不懂。最后找到了一个能看懂的，完善了一下。源控件https://www.cnblogs.com/madehua/archive/2011/12/14/2287672.html 页面代码<UserControlx:Class="WpfCustomControlLibra... 查看详情

jquerypager20160918分页控件

分享一下自己在项目中引用的Jquery分页控件index.html内容<!DOCTYPEhtml><htmllang="zh-cn"xmlns="http://www.w3.org/1999/xhtml"><head><metacharset="utf-8"/><title>简单的jQuery分页插件下载</title>< 查看详情

分页控件在 Gridview 中不可见

】分页控件在Gridview中不可见【英文标题】：PagingcontrolsnotvisibleinGridview【发布时间】：2011-07-2612:13:20【问题描述】：我在我的项目中为gridview设置了AllowPaging=True。当我绑定它时，我知道我返回了100多行，并且PageSize设置为50。但... 查看详情

winform自定义分页控件及datagridview数据绑定

分页效果如上图所示，用到的控件均为基本控件，其方法如下右击项目-添加-新建项选择用户控件然后在用户控件中拖入所需要的Label，Button，Text用户控件全部代码： usingSystem;usingSystem.Collections.Generic;usingSystem.Componen... 查看详情

wpf之列表分页控件(代码片段)

WPF之列表分页控件控件名：WindowAcrylicBlur作者：WPFDevelopersOrg -黄佳|驚鏵原文链接： https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用大于等于.NET40。VisualStudio2022。项目使用MIT开源许可协议。新建Pagination自定义控件... 查看详情

仿淘宝分页按钮效果简单美观易使用的js分页控件

分页按钮思想： 1、少于9页，全部显示 2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码附件中有完整例子的压缩包下载。已更新到最新版本先看效果图： 01输入框焦点效果 02效果 ... 查看详情

如何使用中继器控件进行分页？ [关闭]

】如何使用中继器控件进行分页？[关闭]【英文标题】：HowtopagingusingRepeaterControl?[closed]【发布时间】：2013-08-3112:55:20【问题描述】：你能告诉我如何在WebForms应用程序中为中继器控件使用分页吗？我需要一个用于后页、下一页的... 查看详情

分页控件的使用

插件：pagination<scriptsrc="SHC_VoithChinaTravelApplicationpagination.js"></script><script>varpageIndex=0;//页面索引初始值varpageSize=5;//每页显示条数初始化，修改显示条数，修改这里即可$(function(){GetSalesOrder();}) 查看详情

winform通用分页控件实战篇(提供源码下载)

在Web中，以前写过相关的分页控件的实例教程，如：分页控件实战Post篇 (包源码的）在Winform中，分页有时候也是必不可少的一项，因此，新手Mark一下有时候是必要的。下面开始简单介绍一下ÿ... 查看详情

求助：asp使用easyuidatagrid控件分页问题

ASP使用EasyuiDataGrid控件分页，asp输出JSON数据，可以显示数据，但点击下一页没有响应，请问怎么处理pg=request.form("page")rw=Request.form("rows")参考技术A后台接收到page和rows属性进行分页查询不就行了,,,,,和常规分页逻辑... 查看详情