datatable经典例子

最新推荐文章于 2020-08-19 14:34:40 发布
最新推荐文章于 2020-08-19 14:34:40 发布
阅读量353 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_20757489/article/details/101291917
版权 
<!DOCTYPE html>
<html lang="ZH-cn">
<head>
	<meta charset="utf-8">
	<title>datatable</title>
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
 
 
<!--或者下载到本地，下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>

</head>
<body>
 <!-- 搜索框 -->
<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
    <thead>
    <tr>
        <th>目标列</th>
        <th>搜索文本</th>
        <th>使用正则</th>
        <th>使用智能搜索</th>
    </tr>
    </thead>
 
    <tbody>
    <tr id="filter_global">
        <td>全局搜索</td>
        <td align="center"><input type="text" class="global_filter" id="global_filter"></td>
        <td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
        <td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
    </tr>
    <tr id="filter_col1" data-column="0">
        <td>Name（列）</td>
        <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
    </tr>
    <tr id="filter_col2" data-column="1">
        <td> Position（列）</td>
        <td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
    </tr>
    <tr id="filter_col3" data-column="2">
        <td> Office（列）</td>
        <td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
    </tr>
    <tr id="filter_col4" data-column="3">
        <td>Age（列）</td>
        <td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
    </tr>
    <tr id="filter_col5" data-column="4">
        <td>Start date（列）</td>
        <td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
    </tr>
    <tr id="filter_col6" data-column="5">
        <td>Salary（列）</td>
        <td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
        <td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
    </tr>
    </tbody>
</table>
 
<!-- 表格开始 -->
<table id="example" class="display" 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>
<!-- 表格结束 -->
</table>
 
<script>
function filterGlobal () {
    $('#example').DataTable().search(
        $('#global_filter').val(),
        $('#global_regex').prop('checked'),
        $('#global_smart').prop('checked')
    ).draw();
}
 
function filterColumn ( i ) {
    $('#example').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),
        $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}
 
$(document).ready(function() {
    $('#example').DataTable();
 
    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );
 
    $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
} );
</script>
</body>
</html>

 

Jquery dataTable完整例子（取数据、分页、样式等）
09-21
分页、排序、检索 Datatable与json之间数据转换，一个详细完整的例子！，希望对大家有用。
datatables所有例子
03-06
datatable基本例子都在这里，例子和官网的一一对应，如果访问本地ajax的.tex文件有跨域的话，请移步至我的chrome的ajax跨域问题解决博客
Datatables应用实例 （极致精简）
weixin_34413065的博客
11-30 317
（仅供参考，不喜勿喷） //附sql-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------...
DataTable.Compute方法使用实例
weixin_34067049的博客
04-07 389
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Data; namespace Console11 {     class Program     {         static void Main(string[] args...
Jquery dataTable完整例子（分页，带文档）
12-05
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。 分页、排序、检索 Datatable与json之间数据转换，一个详细完整的例子！
Jquery DataTable使用经典案例
01-10
Jquery DataTable是一款强大的JavaScript库，用于处理HTML表格的数据展示、排序、过滤、分页和搜索功能，极大地提升了网页上...通过深入学习和实践这个案例，你将能够熟练地掌握Jquery DataTable的使用技巧和最佳实践。
DataTable案例.rar
11-01
标题中的"DataTable案例.rar"指的是一个关于DataTable的实践示例集合，它可能包含了一系列的HTML、CSS和JavaScript文件，用于演示如何在Web应用中使用DataTable这个强大的数据展示库。DataTable是一个广泛使用的开源...
经典案例通用方法以及dataTable
01-21
根据给定的信息，我们可以归纳出以下几个关键的知识点： ... #### 1.1 功能概述 ... #### 1.2 实现原理 - **数据准备**：首先定义了三个数组`num`、`english`、`ENGLISH`分别存储数字、小写字母和大写字母。...
DataTables 的 实例 《一》
热门推荐
maxcode
01-14 2万+
1.加载需要的js/css文件 2. function del(id){ alert(id); } var table; $(document).ready(function() { table = $('#example').dataTable( { "processing": true, "aoColumns" : [
jquery表格插件datatables应用实例
07-06 6838
<br />jquery表格插件datatables应用实例<br />DataTables的主页是http://www.datatables.net/<br />先上个这个demo的截图，设想的操作是输入客户名称，按检索后进行模糊检索进<br /> 行分 页显示，每页显示8条记录。<br />1 页面部分<br /> 使用DataTables时，html需要如下书写，其中tfoot部分是表表格的下部标题，<br /> 可以不<br /> 要。<br /> Html代码<table class="
[简单]DataTables简单示例
08-07
NULL 博文链接：https://53873039oycg.iteye.com/blog/2101989
学习DataTable的例子
07-25
学习DataTable的例子
jquery-dataTables简单实例
05-28
工作需要用到jquery dataTables。 网上找不到这样的例子，只好我自已整理一份了。 该demo包含８个可以运行的最简单的个例子。 希望能对大家有帮助。
datatables 示例
03-27
datatable 使用示例，简单易学，适合新手入门。前端如何分类、css 编写。
jquery datatables实例
12-18
jquery datatables前后台数据交互分页实例。
datatable 个人案例
gaisidewangzhan1的博客
06-17 1302
一次完整的使用dataTable：为方便以后使用，特记录，网上综合结果。HTML：&lt;div class="mt-20"&gt; &lt;table class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="bigDataList"&gt; ...
datatable的案例
qq_44858151的博客
08-19 307
//始终要对比的数据表，查看是否新添加 string sglCheckmodule = “select * from XXX”; //体检项目对应_左gridcontrol显示数据 dtCheckmodule = BLLUtil.DoQueryBySql(sglCheckmodule); grdCheckmodule.DataSource = dtCheckmodule; try { DataTable dtsaveMapping = BLLUt
DataTable案例
wzalong的博客
04-22 209
[code="java"] DataTable的全局设置 $.extend( $.fn.dataTable.defaults, { searching: false, ordering: false, paging: false, info: false, autoWidth: false, select: true //默认是不支...
DataTable使用样例
记录或发现工作问题，予以解决
04-30 292
$('#add-row').DataTable({ "pageLength": 10, "ajax": { "url": API+url, //请求地址 "dataSrc": "data",//这里是后台返回的数据对象 "type":"GET", //请求方式 "data": function (d) {//d 是原始的发送给服务器的数据，默认很长。 var par...
掌握Jquery DataTable技巧，.Net下的经典使用案例
通过上述知识点的介绍，可以全面地了解在.Net环境中如何使用Jquery DataTable，并掌握其使用技巧和演示案例。此外，通过使用EditorGenerator组件，可以进一步增强对数据的编辑和处理能力。理解并掌握这些知识点，将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值