利用表格分页显示数据的js组件bootstrap datatable的使用

最新推荐文章于 2023-08-17 10:50:26 发布
最新推荐文章于 2023-08-17 10:50:26 发布
阅读量969 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/reblue520/article/details/80553395
版权
本文介绍如何使用Bootstrap结合Datatable插件实现数据表格的美化。通过引入必要的库文件，并利用jQuery初始化Datatable，实现了带有排序、搜索等功能的数据展示。适用于前端开发人员学习和参考。
摘要由CSDN通过智能技术生成

前面展示了datatable的简单使用，还可以通过bootstrap结合datatable来使用，这样可以进一步美化datatable插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datatable</title>
    <!-- 
    datatable依赖jquery,需要引入jquery的库,自身js库还有css库
    一万行以内的数据可以使用前端的datatable方案解决
    一万行以上甚至更大的数据量使用后端数据库类似limit 20分批查询，搜索等方案解决 -->

    <!-- bootstrap datatable插件引入的库文件 -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>
　　需要引入Jquery库
　　<script type="text/javascript" src="static/jquery.js"></script>


    <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#example').DataTable();

            // 添加class属性table table-striped table-bordered
            // $('#example')
            // .removeClass( 'display' )
            // .addClass('table table-striped table-bordered');
        } );
    </script>
    </script>
</head>
<body>
    <!-- 引入bootstrap的流式布局，固定宽度class样式 -->
    <div class="container">
    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
            </tr>
            <tr>
                <td>Cara Stevens</td>
                <td>Sales Assistant</td>
                <td>New York</td>
                <td>46</td>
                <td>2011/12/06</td>
                <td>$145,600</td>
            </tr>
            <tr>
                <td>Hermione Butler</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>47</td>
                <td>2011/03/21</td>
                <td>$356,250</td>
            </tr>
            <tr>
                <td>Lael Greer</td>
                <td>Systems Administrator</td>
                <td>London</td>
                <td>21</td>
                <td>2009/02/27</td>
                <td>$103,500</td>
            </tr>
            <tr>
                <td>Jonas Alexander</td>
                <td>Developer</td>
                <td>San Francisco</td>
                <td>30</td>
                <td>2010/07/14</td>
                <td>$86,500</td>
            </tr>
            <tr>
                <td>Shad Decker</td>
                <td>Regional Director</td>
                <td>Edinburgh</td>
                <td>51</td>
                <td>2008/11/13</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Michael Bruce</td>
                <td>Javascript Developer</td>
                <td>Singapore</td>
                <td>29</td>
                <td>2011/06/27</td>
                <td>$183,000</td>
            </tr>
            <tr>
                <td>Donna Snider</td>
                <td>Customer Support</td>
                <td>New York</td>
                <td>27</td>
                <td>2011/01/25</td>
                <td>$112,000</td>
            </tr>
        </tbody>
    </table>

</div>
</body>
</html>

reblue520
关注
Bootstrap风格的分页表格Datatables
禾本科生的博客
12-13 1267
首先，引入插件
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
10-17
在Bootstrap开发框架中，使用dataTable直接录入表格行数据是一种高效且直观的方式，尤其适用于处理简单业务的明细数据。与传统的弹出窗口录入相比，这种方式在Web应用中提供了更友好的用户体验，增强了数据录入的...
datatables bootstrap demo下载
09-05
datatables bootstrap demo js css 全部都有 适合学习datatables的各位道友借鉴。好吧 后面是凑字数的，希望采纳
php+bootstrap+dataTable+jquery分页列表
weixin_34249678的博客
10-21 207
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script src="jquery-1.8.3.min.js" type="text/javascript">&...
bootstrap datatables前端分页
WCR_520的博客
06-19 296
datatables实现前端分页
MVC使用bootstrap的datatables 实现后台分页显示
easyboot的专栏
12-25 538
js 代码 function MultiGNDDataQuery() { var EquipmentNo = $("#txtEquipmentNo").val(); var OrganizationID = $("#txtOrganizationID").val(); $('#tbMultiGND').DataTable...
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
12-11
在本文中，我们将深入探讨如何使用Bootstrap、jQuery和DataTable库实现异步AJAX来刷新表格数据的方法。这个功能常用于动态更新数据展示，无需页面整体刷新，提高用户体验。 首先，让我们了解一下涉及的关键技术和...
jQuery bootstrap带分页表格数据搜索筛选代码
11-11
本文将深入探讨如何使用 jQuery 和 Bootstrap 实现带分页的表格数据搜索和筛选功能。 首先，Bootstrap 提供了丰富的 CSS 样式和组件，包括表格（Table）样式，使得我们可以轻松创建出响应式的、美观的表格。而 ...
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
可以使用`$.fn.dataTable()`方法，这是DataTables插件的一部分，它提供了强大的表格功能，包括筛选、排序和分页。 分页是数据量大的表格中不可或缺的部分，它允许用户分批查看数据，而不是一次性加载所有内容。...
Bootstrap-Datatables Java后台分页 批量删除 自定义搜索
weixin_39555954的博客
10-30 1029
1、先上一张效果图 主要页面html代码 &lt;div class="search_style"&gt; &lt;ul class="search_content clearfix"&gt; &lt;li&gt;&lt;label class="l_f"&gt;商品名称&lt;/label&gt;&lt;input na
DataTable+Jquery+Bootstrap实现表格增删改查
05-15
DataTable+Jquery+Bootstrap实现表格增删改查 使用DataTable+Jquery+Bootstrap实现表格增删改查
bootstrap按钮插件（Button）使用方法解析
08-31
主要为大家详细解析了bootstrap按钮插件Button使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
永远热泪盈眶 坚持输出
06-16 1594
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面一级table动态加载二级table动态产生 在这里记录一下，也是在公司用到的一个例子，刚刚解决，正好趁热打铁。前端页面是采用BootStrap框架搭建的，主要的样式涉及到项目，在这里就不截图了，直接上代码： 一级table动态加载 jsp/html中的table代码： <table id="data-table" class="table table-striped table-condensed" border="0"
关于bootstrap和datatable
xu_xu_0924的博客
05-10 458
1.datatable的单个复选框以及bootstrap的模态框按钮是否禁用 <button id="move_btn" type="button" class="u-btn normal mr0" style="margin-left:10px;" data-toggle="modal" > <i class="fa fa-edit"></i> 批量移动 </button> 只能选中一个
Bootstrap的datatable控件
热门推荐
天高任鸟飞
05-02 1万+
Datatable控件使用非常简单，页面效果如下 首先，添加datatable控件的引用。@*table控件*@ <link href="~/Content/BootStrap/frontmcoinquery/bootstrap-table.css" rel="stylesheet" /> <script src="~/Content/BootStrap/frontmcoinq
jQuery dataTables 的使用
xqqing79的专栏
10-28 922
  jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。 首先，需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库， 目前最新的版本是 1....
bootstarp table -- 分页数据显示
weixin_38297879的博客
12-03 1626
在bootstarp table 中，进行数据分页的显示，在使用分页的时候，bootStarp table 提供了两种方式，在这里我们介绍 客户端(client)进行数据的分页，希望大神能给我留言，指出这两种方式的区别。 在上一篇bootstarp table的介绍中，我们已经实现了在前端页面请求指定的json文件，然后可以将数据回显，下面将json文件中的数据修改成下面的方式 { "p...
使用 BootstrapTable 实现数据的分页显示（二）
稚枭天卓
10-08 5575
根据 AJAX 的思想，先将需要展示的样式表现出来，然后，编辑展示页面实现后台数据的展示。 编辑类方法，实现action定义 --》 编辑XML配置文件，实现页面跳转 --》编辑 JSP 文件，实现背景部分的展示，编辑并 url ，指定动态数据的获取 action name --》编辑 XML 配置文件，action及其 method 方法 --》编辑 method 方法。此时可以没有返回值，上
bootstrap表格分页功能
最新发布
qq_32871893的博客
08-17 1796
2、后端分页：每次向后台请求页数，也就是每次只查询当前页面加载所需要的那几条数据。1、前端分页：数据库查询所有的数据，也就是数据一次性加载出来，在前端进行分页。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值