DataTables的使用（迅速上手）

最新推荐文章于 2023-01-04 01:15:49 发布
最新推荐文章于 2023-01-04 01:15:49 发布
阅读量954 收藏
点赞数
分类专栏： 技术 文章标签： DataTables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37573226/article/details/102659388
版权

DataTables是jQuery的一款表格插件，非常好用，简单易上手。
使用步骤：
1、到官网下载DataTables中文网下载
2、新建web项目，头文件引入以下文件（位置填写自己的文件位置）

<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<a href="~/Scripts/jquery-3.3.1.min.map">~/Scripts/jquery-3.3.1.min.map</a>
<script src="~/Scripts/jquery.dataTables.min.js"></script>

3、HTML编写一个静态table，给table设置ID为‘example’（为方便展示，此次有大量数据）

<table id="example" class="display" style="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>
    <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>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th></th>
        </tr>
    </tfoot>
</table>

4、编写JS文件

<script>
  $('#example').DataTable({
        属性名1: 值1,
         属性名2: 值2
    })
    </script>

5、DataTables属性

paging: false/true  //是否分页
scrollY: 400，  // Y轴滚动
scrollX: 400,   //X轴滚动
//语言
language: {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    }
热得快小菜鸟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DataTable使用详解
2401_84153270的博客
04-30 573
搞定算法，面试字节再不怕，有需要文章中分享的这些二叉树、链表、字符串、栈和队列等等各大面试高频知识点及解析最后再分享一份终极手撕架构的大礼包(学习笔记)：分布式+微服务+开源框架+性能优化《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》点击传送门，即可获取！} );/*bVisible默认值为true是否展示某一列*/] } );} );
DataTables 使用小结
一个默默的人
10-02 1774
目录DataTables 使用总结引入基本配置服务器分页搜索总结 DataTables 使用总结 使用过一段时间的DataTables , 非常强大的一个table插件。一直在不停的更新。 官网： https://datatables.net/ 引入 一个简单的demo &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;link rel=&quot;stylesheet&quot; hr
Datatables使用教程
Sun的博客
04-04 3649
Datatables中文网手册：http://datatables.club/manual/install.html 可从网站上下载 datatables安装包，将其解压到你的pubic目录下，可以引入线上的 dataTables 来进行使用 laraver框架中使用示例代码 1.简单使用 <!--第一步：引入Javascript / CSS （CDN）--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/c
Datatables从入门到精通（案例一）
ykp的专栏
08-04 4380
<!DOCTYPE html> <html> <head> <title>DataTables example</title> <link rel="stylesheet" type="text/css" href="../static/css/jquery.dataTables.css"> <script type="text/javascript" language="j
C#DataTable操作技巧
风，停了
04-20 8829
DataTable dt = new DataTable(); dt=GetData();//dt获取数据后，列名依次为：姓名，班级，成绩 //根据需求添加序号列 dt.Columns.Add("序号").SetOrdinal(0);//dt的结构为：序号，姓名，班级，成绩
datatables使用大法（再笨也能搞定datatables使用了）
扣丁曼
03-09 1881
一、简介 官网：https://datatables.net/ 中文官网：http://datatables.club/ Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery U...
JQuery DataTables插件使用说明（最新）
shuai_wy的专栏
10-10 8572
JQuery DataTables 实例教程系列，文中的所有实例 都是按照最新版本的官网文档编写的，是我在使用过程中 爬过得坑。
dataTables使用
翎的博客
11-19 231
$(function () { //提示信息 var lang = { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _ST...
angular-datatables：使用角度指令的DataTables（需要维护器）
01-31
为了帮助开发者快速上手，Angular Datatables提供了详尽的文档和示例代码，覆盖了从安装到高级特性的各种用法。通过参考这些资源，开发者可以更高效地集成和定制表格功能。 在`angular-datatables-master`这个...
DataTables
06-18
DataTables 是一款强大的JavaScript库，专门用于将HTML表格转化为高度交互和功能丰富的数据展示工具。这个库默认情况下已经...在实际开发中，结合其详细的文档和丰富的示例，可以快速上手并实现高效的数据展示和交互。
jquery-dataTables简单实例
05-28
这个简单的实例包含了8个基本功能的演示，旨在帮助初学者快速上手jQuery DataTables。通过这些基础，你可以进一步探索更多高级特性，如服务器端处理、自定义列渲染和扩展插件等。在实际工作中，根据需求灵活运用这些...
datatable使用详解
08-21
使用datatable讲解，datatable中select、过滤、查找等如何实现，不必需数据进行交换 简单直接
jQuery表格插件DataTables
11-11
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
Jquery dataTables插件
05-31
Jquery dataTables插件 支持静态分页 排序 固定表头 ajax事件 等等 简单易上手
datatables1.10
07-01
- **示例文件**：包含演示如何使用Datatables的HTML和JS代码，帮助开发者快速上手。 - **文档**：详细说明了 Datatables 的使用方法、配置选项和API，是开发过程中的重要参考。 - **图片和图标**：可能包含用于UI的...
datatables最简单的模板
11-16
这个模板提供了一个基础的配置，可以帮助初学者快速上手。以下是对“datatables最简单的模板”及相关知识点的详细说明： 1. **Datatables简介**：Datatables是基于jQuery的开源插件，它能够将普通的HTML表格转化为...
DataTable用法详解
qq_34059233的博客
04-07 6042
DataTable dt = ds.Tables [0]; int rows = dt.Rows.Count ; for(int i=0;i<rows;i++) { DataRow currentRow = dt.Rows[i]; string val1 = currentRow["nu.
前端开发技术栈（插件篇）：datatables
SteveRocket's-Blog
01-04 4449
1、Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 2、分页，即时搜索和排序。 3、几乎支持任何数据源：DOM，javascript，Ajax 和 服务器处理。 4、支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation。 5、各式各样的扩展: Editor, TableTools, FixedColumns…. 6、丰富多样的option和强大的API。 7、支持国际化。 8、免费开源。
Datatables详细使用教程以及参数理解
Bloxed_shangyc的博客
03-10 5267
Datatables的详细使用以及参数配置,新手指南
java使用datatables
最新发布
05-27
要在Java中使用DataTables，您需要使用DataTables的JavaScript库来创建表格，然后使用Java来处理和呈现数据。以下是使用Java和DataTables创建表格的基本步骤： 1.在HTML页面中引入DataTables库。 ```html ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值