bootstrap-table data-pagination 自动分页

最新推荐文章于 2024-05-21 16:45:41 发布
最新推荐文章于 2024-05-21 16:45:41 发布
阅读量1.7k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wupengxin2012/article/details/88539526
版权 
index.html


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <!-- 引入bootstrap样式 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入bootstrap-table样式 -->
    <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
    <!-- jquery -->
    <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap-table.min.js -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    <!-- 引入中文语言包 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> 
</head>

<body>

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <table data-pagination="true" data-toggle="table"
           data-url="/data1.txt">
        <thead>
            <tr>
                <th data-field="id">Item ID</th>
                <th data-field="name">Item Name</th>
                <th data-field="price">Item Price</th>
            </tr>
        </thead>
    </table>
   
</body>
</html>



data1.txt

 [  
        {  
            "id": 0,  
            "name": "Item 0",  
            "price": "$0"  
        },  
        {  
            "id": 1,  
            "name": "Item 1",  
            "price": "$1"  
        },  
        {  
            "id": 2,  
            "name": "Item 2",  
            "price": "$2"  
        },  
        {  
            "id": 3,  
            "name": "Item 3",  
            "price": "$3"  
        },  
        {  
            "id": 4,  
            "name": "Item 4",  
            "price": "$4"  
        },  
        {  
            "id": 5,  
            "name": "Item 5",  
            "price": "$5"  
        },  
        {  
            "id": 6,  
            "name": "Item 6",  
            "price": "$6"  
        },  
        {  
            "id": 7,  
            "name": "Item 7",  
            "price": "$7"  
        },  
        {  
            "id": 8,  
            "name": "Item 8",  
            "price": "$8"  
        },  
        {  
            "id": 9,  
            "name": "Item 9",  
            "price": "$9"  
        },  
        {  
            "id": 10,  
            "name": "Item 10",  
            "price": "$10"  
        },  
        {  
            "id": 11,  
            "name": "Item 11",  
            "price": "$11"  
        },  
        {  
            "id": 12,  
            "name": "Item 12",  
            "price": "$12"  
        },  
        {  
            "id": 13,  
            "name": "Item 13",  
            "price": "$13"  
        },  
        {  
            "id": 14,  
            "name": "Item 14",  
            "price": "$14"  
        },  
        {  
            "id": 15,  
            "name": "Item 15",  
            "price": "$15"  
        },  
        {  
            "id": 16,  
            "name": "Item 16",  
            "price": "$16"  
        },  
        {  
            "id": 17,  
            "name": "Item 17",  
            "price": "$17"  
        },  
        {  
            "id": 18,  
            "name": "Item 18",  
            "price": "$18"  
        },  
        {  
            "id": 19,  
            "name": "Item 19",  
            "price": "$19"  
        },  
        {  
            "id": 20,  
            "name": "Item 20sssss",  
            "price": "$20"  
        }  
    ]
吴捧欣
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap-table分页+汇总统计
08-03
对于服务器端分页，可以使用 `data-side-pagination` 设置为 "server"，并根据 Bootstrap-table 的请求参数（如 `page`, `limit`, `search`, `sortName`, `sortOrder` 等）来调整服务器端的查询逻辑。 此外，还可以...
bootstrap-table 简单入门例子，基于data-url 不做伸手党
wupengxin2012的博客
03-13 3285
整了半天，终于整出来了,希望能帮到别人 index.html @using System.Web.Optimization @ViewBag.Title &amp;amp;amp;lt;br /&amp;amp;amp;gt; &amp;amp;amp;lt;br /&amp;amp;amp;gt; &amp;amp;amp;lt;br /&a
bootstrap table使用总结
最新发布
weixin_43704154的博客
05-21 1697
使用服务器端处理时，bootstrap-table的默认操作模式是简单地丢弃表中当前存在的任何数据，并向服务器发出请求以获取要显示的第一页数据。因此，您可以使用data-defer-url而不是data-url来指示bootstrap-table不发出初始请求，而是使用页面上已有的数据。依赖：tablednd v0.9，如果你想要你可以包含bootstrap-table-reorder-rows.css文件来使用默认的。1，$ 100，$ 2，$ 20而不是$ 1，$ 2，$ 20，$ 100。
Data-Pagination 分页
hrbsfdxzhq01的博客
01-23 1527
&lt;!--设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以 外还提供了jumper和total，size和特殊的布局符号-&gt;，-&gt;后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于 设置每页显示的页码数量。--&gt; &lt;div class="blo...
bootstrap table 传参
softuse的博客
06-05 4144
//查询栏 function userquery(){ var data=$("#formSearch").serialize(); $.post( '/yycgproject/queryUser_result', data, function(msg){ //这里必须接收json对象 //此处判断不能简写为!msg ...
bootstrap-table表格如何实现分页，并可以模糊搜索
qq_52959651的博客
11-27 1601
bootstrap-table表格如何实现分页，并可以模糊搜索，删除指定的一行 这是实现效果 引入文件 <link rel="stylesheet" type="text/css" href="../css/bootstrap-table.min.css" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> <script src="../js/jquery.js"
bootstrap-table-pagejump.zip
11-18
在表格元素上添加`data-pagination="true"`和`data-page-jump="true"`属性，以启用分页和页面跳转功能。 ```html <table id="table" data-pagination="true" data-page-jump="true"> <!-- 表格列定义 --> </table>...
bootstrap-table客户端分页实例
08-06
5. **初始化表格**：在JavaScript中调用`$(table).bootstrapTable(options)`方法初始化表格，`options`是一个包含各种配置项的对象。 6. **自定义功能**：根据需要，可以监听事件、调用API或扩展默认行为以实现特定...
bootstrap-table动态加载json数据并且支持分页
03-16
`data-pagination`设置为`true`启用分页，`data-page-size`定义每一页显示的数据条数。此外，我们还需要在JavaScript中配置分页选项，如： ```javascript $(function () { $('#table').bootstrapTable({ ...
[MVC]bootstrap-table表格ajax获取json数据并分页
03-19
在本文中，我们将深入探讨如何在ASP.NET MVC框架下，利用bootstrap-table插件通过AJAX方式获取JSON数据并实现分页功能。Bootstrap Table是一个轻量级、强大的前端组件，它提供了一种美观的方式来展示和操作表格数据...
Bootstrap Table使用整理-分页组合查询
weixin_42175570的博客
10-21 496
一、分页组合查询 /* * data-pagination 指定是否启用分页 * data-page-list 指定分页的页数据量数组 '[5,10]' * data-side-pagination 指定分页是否是服务端(server)/客户端(client) * 特别说明： * 客户端，请求参数： * search:文本框内容，在文本框内容改变是自动提交请求 * order: 排序方式 * s...
Bootstrap Table通过data-url及data-ajax后台分页
lgangui的博客
06-18 2325
使用data-url 后台分页 前台代码 <!-- Page Content --> <div class="col-sm-10" id="content"> {% csrf_token %} <title>Re-install</title> <div style="height: 50px"> <div class=
Bootstrap系列之分页（Pagination）
老__L的博客
06-18 8985
我们让分页（pagination）占据了一大块区域来放置相互关联的链接，这让链接更醒目并且易于扩充，除了这些好处，还为链接提供了较大的点击区域。分页（Pagination）是利用 HTML 的列表元素构建的，因此屏幕阅读器可以识别并读出链接的数量。并且列表元素外面还用元素进行了包裹，以便让屏幕阅读器和其他辅助技术能够将其识别为导航区域。此外，由于页面上可能会有多个这样的导航区域，因此建议为设置一个用于描述其用途的aria-label属性。
前端表格插件 BootstrapTable 入门教程
热门推荐
JAVA_HIGHNESS的专栏
06-29 13万+
官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/Github地址： https://github.com/wenzhixin/bootstrap-table 官网介绍： 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 主要功能 支持
前端分页插件pagination
cdb104的博客
05-30 1026
&lt;link href="~/Scripts/pagination/pagination.css" rel="stylesheet" /&gt; &lt;script src="~/Scripts/pagination/pagination.min.js"&gt;&lt;/script&gt; &lt;div id="dataContainer" style=&quot
Bootstrap-table 自我留存
Rebirth 重生
05-18 1421
一、什么是Bootstrap-table？ 　　在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如..
【转】浏览器中的data类型的Url格式,data:image/png,data:image/jpeg!
dianzongliao7933的博客
02-06 1万+
所谓"data"类型的Url格式，是在RFC2397中 提出的，目的对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。例如对于img这个Tag，哪怕这个图片非常非常的小，小到只有一个 点，也是要从另外一个外部的图片文件例如gif文件中读入的，如果浏览器实现了data类型的Url格式，这个文件就可以直接从页面文件内部读入了。 data类型的Url格式早...
BootstrapTable分页（二）
csdnluolei
10-29 7223
看完上篇博客相信看完你对bootstrapTable的使用也有了进一步的认识，我们来看看bootstrapTable是怎么分页的 先看页面   代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;bootstrap-table-...
bootstrap-table配置大全
06-10
以下是 bootstrap-table 的常用配置： 1. data：表格数据源，可以是数组或者是 URL 地址。 2. columns：表格列的配置，包括列名称、字段、宽度、格式化函数等。 3. height：表格高度，可以是数字或者是函数。 4....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值