https://www.cnblogs.com/chengxs/p/6290569.html

一、DataTables

个人觉得学习一门新的插件或者技术时候，官方文档是最根本的，入门最快的地方，但是有时候看完官方文档，一步步的动手写例子，总会出现各种莫名其妙的错误，需要我们很好的进行研究出错的地方。
官方网站（中文）：http://datatables.club/
官方网站：https://www.datatables.net/

二、简单的例子

怎样简单地使用DataTables？使用下方简单的几行代码，一个方法初始化table。

  1. $(document).ready(function(){
  2.         $('#myTable').DataTable();
  3.     });

开始使用DataTables很简单，只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上，可以使用下面这两个文件：
js文件 //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
css文件 //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库（是一个代码库，可以从官网下载），一个DT的核心js文件和一个DT的css文件， 完成以以下三步即可看到如下效果：image.png

1、例子1：

(1)使用的是：Hbuilder
(2)项目结构：
image.png
(3)index.html代码

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>DataTables简单用例</title>
  7.         <!--样式-->
  8.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  9.         <!-- jQuery -->
  10.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  11.         <!-- DataTables -->
  12.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  13.         <script type="text/javascript">
  14.             $(document).ready(function() {
  15.                 $('#example').DataTable();
  16.             });
  17.         </script>
  18.     </head>
  20.     <body>
  21.         <table id="example" class="display" cellspacing="0" width="100%">
  22.             <thead>
  23.                 <tr>
  24.                     <th>Name</th>
  25.                     <th>Position</th>
  26.                     <th>Office</th>
  27.                     <th>Extn.</th>
  28.                     <th>Start date</th>
  29.                     <th>Salary</th>
  30.                 </tr>
  31.             </thead>
  32.             <tfoot>
  33.                 <tr>
  34.                     <th>Name</th>
  35.                     <th>Position</th>
  36.                     <th>Office</th>
  37.                     <th>Extn.</th>
  38.                     <th>Start date</th>
  39.                     <th>Salary</th>
  40.                 </tr>
  41.             </tfoot>
  42.         </table>
  44.     </body>
  46. </html>

(4)效果：
image.png

2、例子2:（PS：还是纯粹的前端静态页面）

(1)结构和工具见例子1

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>DataTables简单用例</title>
  7.         <!--样式-->
  8.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  9.         <!-- jQuery -->
  10.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  11.         <!-- DataTables -->
  12.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  13.         <script type="text/javascript">
  14.             $(document).ready(function() {
  15.                 $('#example').DataTable();
  16.             });
  17.         </script>
  18.     </head>
  20.     <body>
  21.         <table id="example" class="display" cellspacing="0" width="100%">
  22.             <thead>
  23.                 <tr>
  24.                     <th>Name</th>
  25.                     <th>Position</th>
  26.                     <th>Office</th>
  27.                     <th>Extn.</th>
  28.                     <th>Start date</th>
  29.                     <th>Salary</th>
  30.                 </tr>
  31.             </thead>
  32.             <tbody>
  33.                 <tr>
  34.                     <th>bob</th>
  35.                     <th>123</th>
  36.                     <th>123</th>
  37.                     <th>123</th>
  38.                     <th>123</th>
  39.                     <th>123</th>
  40.                 </tr>
  41.                 <tr>
  42.                     <th>JIM</th>
  43.                     <th>123</th>
  44.                     <th>123</th>
  45.                     <th>123</th>
  46.                     <th>123</th>
  47.                     <th>123</th>
  48.                 </tr>
  49.                 <tr>
  50.                     <th>Jack</th>
  51.                     <th>123</th>
  52.                     <th>123</th>
  53.                     <th>123</th>
  54.                     <th>123</th>
  55.                     <th>123</th>
  56.                 </tr>
  57.                 <tr>
  58.                     <th>qiao</th>
  59.                     <th>123</th>
  60.                     <th>123</th>
  61.                     <th>123</th>
  62.                     <th>123</th>
  63.                     <th>123</th>
  64.                 </tr>
  65.             </tbody>
  66.             <tfoot>
  67.                 <tr>
  68.                     <th>Name</th>
  69.                     <th>Position</th>
  70.                     <th>Office</th>
  71.                     <th>Extn.</th>
  72.                     <th>Start date</th>
  73.                     <th>Salary</th>
  74.                 </tr>
  75.             </tfoot>
  76.         </table>
  78.     </body>
  80. </html>

(2)效果：
image.png
说明：search的输入框是对所有属性的全部搜索，并显示搜索结果，最重要的是：这个搜索与表格进行了数据的双向绑定，可以实时进行更新。

重要：DataTables已经读取几乎任何JSON数据源，可以通过ajax.datatables读数据的能力已经从几乎任何JSON数据源可以通过Ajax读取数据的能力。
学习网站：https://datatables.net/examples/ajax/

3、例子3:（PS：数据源是数组arrays）

（1）项目结构：（多了一个data的文件夹，文件夹里有一个arrays.txt文件，）
image.png
（2）arrays.txt内容

  1. {
  2.     "data": [
  3.         [
  4.             "Tiger Nixon",
  5.             "System Architect",
  6.             "Edinburgh",
  7.             "5421",
  8.             "2011\/04\/25",
  9.             "$320,800"
  10.         ],
  11.         [
  12.             "Garrett Winters",
  13.             "Accountant",
  14.             "Tokyo",
  15.             "8422",
  16.             "2011\/07\/25",
  17.             "$170,750"
  18.         ],
  19.         [
  20.             "Ashton Cox",
  21.             "Junior Technical Author",
  22.             "San Francisco",
  23.             "1562",
  24.             "2009\/01\/12",
  25.             "$86,000"
  26.         ],
  27.         [
  28.             "Cedric Kelly",
  29.             "Senior Javascript Developer",
  30.             "Edinburgh",
  31.             "6224",
  32.             "2012\/03\/29",
  33.             "$433,060"
  34.         ],
  35.         [
  36.             "Airi Satou",
  37.             "Accountant",
  38.             "Tokyo",
  39.             "5407",
  40.             "2008\/11\/28",
  41.             "$162,700"
  42.         ],
  43.         [
  44.             "Brielle Williamson",
  45.             "Integration Specialist",
  46.             "New York",
  47.             "4804",
  48.             "2012\/12\/02",
  49.             "$372,000"
  50.         ],
  51.         [
  52.             "Herrod Chandler",
  53.             "Sales Assistant",
  54.             "San Francisco",
  55.             "9608",
  56.             "2012\/08\/06",
  57.             "$137,500"
  58.         ],
  59.         [
  60.             "Rhona Davidson",
  61.             "Integration Specialist",
  62.             "Tokyo",
  63.             "6200",
  64.             "2010\/10\/14",
  65.             "$327,900"
  66.         ],
  67.         [
  68.             "Colleen Hurst",
  69.             "Javascript Developer",
  70.             "San Francisco",
  71.             "2360",
  72.             "2009\/09\/15",
  73.             "$205,500"
  74.         ],
  75.         [
  76.             "Sonya Frost",
  77.             "Software Engineer",
  78.             "Edinburgh",
  79.             "1667",
  80.             "2008\/12\/13",
  81.             "$103,600"
  82.         ],
  83.         [
  84.             "Jena Gaines",
  85.             "Office Manager",
  86.             "London",
  87.             "3814",
  88.             "2008\/12\/19",
  89.             "$90,560"
  90.         ],
  91.         [
  92.             "Quinn Flynn",
  93.             "Support Lead",
  94.             "Edinburgh",
  95.             "9497",
  96.             "2013\/03\/03",
  97.             "$342,000"
  98.         ],
  99.         [
  100.             "Charde Marshall",
  101.             "Regional Director",
  102.             "San Francisco",
  103.             "6741",
  104.             "2008\/10\/16",
  105.             "$470,600"
  106.         ],
  107.         [
  108.             "Haley Kennedy",
  109.             "Senior Marketing Designer",
  110.             "London",
  111.             "3597",
  112.             "2012\/12\/18",
  113.             "$313,500"
  114.         ],
  115.         [
  116.             "Tatyana Fitzpatrick",
  117.             "Regional Director",
  118.             "London",
  119.             "1965",
  120.             "2010\/03\/17",
  121.             "$385,750"
  122.         ],
  123.         [
  124.             "Michael Silva",
  125.             "Marketing Designer",
  126.             "London",
  127.             "1581",
  128.             "2012\/11\/27",
  129.             "$198,500"
  130.         ],
  131.         [
  132.             "Paul Byrd",
  133.             "Chief Financial Officer (CFO)",
  134.             "New York",
  135.             "3059",
  136.             "2010\/06\/09",
  137.             "$725,000"
  138.         ],
  139.         [
  140.             "Gloria Little",
  141.             "Systems Administrator",
  142.             "New York",
  143.             "1721",
  144.             "2009\/04\/10",
  145.             "$237,500"
  146.         ],
  147.         [
  148.             "Bradley Greer",
  149.             "Software Engineer",
  150.             "London",
  151.             "2558",
  152.             "2012\/10\/13",
  153.             "$132,000"
  154.         ],
  155.         [
  156.             "Dai Rios",
  157.             "Personnel Lead",
  158.             "Edinburgh",
  159.             "2290",
  160.             "2012\/09\/26",
  161.             "$217,500"
  162.         ],
  163.         [
  164.             "Jenette Caldwell",
  165.             "Development Lead",
  166.             "New York",
  167.             "1937",
  168.             "2011\/09\/03",
  169.             "$345,000"
  170.         ],
  171.         [
  172.             "Yuri Berry",
  173.             "Chief Marketing Officer (CMO)",
  174.             "New York",
  175.             "6154",
  176.             "2009\/06\/25",
  177.             "$675,000"
  178.         ],
  179.         [
  180.             "Caesar Vance",
  181.             "Pre-Sales Support",
  182.             "New York",
  183.             "8330",
  184.             "2011\/12\/12",
  185.             "$106,450"
  186.         ],
  187.         [
  188.             "Doris Wilder",
  189.             "Sales Assistant",
  190.             "Sidney",
  191.             "3023",
  192.             "2010\/09\/20",
  193.             "$85,600"
  194.         ],
  195.         [
  196.             "Angelica Ramos",
  197.             "Chief Executive Officer (CEO)",
  198.             "London",
  199.             "5797",
  200.             "2009\/10\/09",
  201.             "$1,200,000"
  202.         ],
  203.         [
  204.             "Gavin Joyce",
  205.             "Developer",
  206.             "Edinburgh",
  207.             "8822",
  208.             "2010\/12\/22",
  209.             "$92,575"
  210.         ],
  211.         [
  212.             "Jennifer Chang",
  213.             "Regional Director",
  214.             "Singapore",
  215.             "9239",
  216.             "2010\/11\/14",
  217.             "$357,650"
  218.         ],
  219.         [
  220.             "Brenden Wagner",
  221.             "Software Engineer",
  222.             "San Francisco",
  223.             "1314",
  224.             "2011\/06\/07",
  225.             "$206,850"
  226.         ],
  227.         [
  228.             "Fiona Green",
  229.             "Chief Operating Officer (COO)",
  230.             "San Francisco",
  231.             "2947",
  232.             "2010\/03\/11",
  233.             "$850,000"
  234.         ],
  235.         [
  236.             "Shou Itou",
  237.             "Regional Marketing",
  238.             "Tokyo",
  239.             "8899",
  240.             "2011\/08\/14",
  241.             "$163,000"
  242.         ],
  243.         [
  244.             "Michelle House",
  245.             "Integration Specialist",
  246.             "Sidney",
  247.             "2769",
  248.             "2011\/06\/02",
  249.             "$95,400"
  250.         ],
  251.         [
  252.             "Suki Burks",
  253.             "Developer",
  254.             "London",
  255.             "6832",
  256.             "2009\/10\/22",
  257.             "$114,500"
  258.         ],
  259.         [
  260.             "Prescott Bartlett",
  261.             "Technical Author",
  262.             "London",
  263.             "3606",
  264.             "2011\/05\/07",
  265.             "$145,000"
  266.         ],
  267.         [
  268.             "Gavin Cortez",
  269.             "Team Leader",
  270.             "San Francisco",
  271.             "2860",
  272.             "2008\/10\/26",
  273.             "$235,500"
  274.         ],
  275.         [
  276.             "Martena Mccray",
  277.             "Post-Sales support",
  278.             "Edinburgh",
  279.             "8240",
  280.             "2011\/03\/09",
  281.             "$324,050"
  282.         ],
  283.         [
  284.             "Unity Butler",
  285.             "Marketing Designer",
  286.             "San Francisco",
  287.             "5384",
  288.             "2009\/12\/09",
  289.             "$85,675"
  290.         ],
  291.         [
  292.             "Howard Hatfield",
  293.             "Office Manager",
  294.             "San Francisco",
  295.             "7031",
  296.             "2008\/12\/16",
  297.             "$164,500"
  298.         ],
  299.         [
  300.             "Hope Fuentes",
  301.             "Secretary",
  302.             "San Francisco",
  303.             "6318",
  304.             "2010\/02\/12",
  305.             "$109,850"
  306.         ],
  307.         [
  308.             "Vivian Harrell",
  309.             "Financial Controller",
  310.             "San Francisco",
  311.             "9422",
  312.             "2009\/02\/14",
  313.             "$452,500"
  314.         ],
  315.         [
  316.             "Timothy Mooney",
  317.             "Office Manager",
  318.             "London",
  319.             "7580",
  320.             "2008\/12\/11",
  321.             "$136,200"
  322.         ],
  323.         [
  324.             "Jackson Bradshaw",
  325.             "Director",
  326.             "New York",
  327.             "1042",
  328.             "2008\/09\/26",
  329.             "$645,750"
  330.         ],
  331.         [
  332.             "Olivia Liang",
  333.             "Support Engineer",
  334.             "Singapore",
  335.             "2120",
  336.             "2011\/02\/03",
  337.             "$234,500"
  338.         ],
  339.         [
  340.             "Bruno Nash",
  341.             "Software Engineer",
  342.             "London",
  343.             "6222",
  344.             "2011\/05\/03",
  345.             "$163,500"
  346.         ],
  347.         [
  348.             "Sakura Yamamoto",
  349.             "Support Engineer",
  350.             "Tokyo",
  351.             "9383",
  352.             "2009\/08\/19",
  353.             "$139,575"
  354.         ],
  355.         [
  356.             "Thor Walton",
  357.             "Developer",
  358.             "New York",
  359.             "8327",
  360.             "2013\/08\/11",
  361.             "$98,540"
  362.         ],
  363.         [
  364.             "Finn Camacho",
  365.             "Support Engineer",
  366.             "San Francisco",
  367.             "2927",
  368.             "2009\/07\/07",
  369.             "$87,500"
  370.         ],
  371.         [
  372.             "Serge Baldwin",
  373.             "Data Coordinator",
  374.             "Singapore",
  375.             "8352",
  376.             "2012\/04\/09",
  377.             "$138,575"
  378.         ],
  379.         [
  380.             "Zenaida Frank",
  381.             "Software Engineer",
  382.             "New York",
  383.             "7439",
  384.             "2010\/01\/04",
  385.             "$125,250"
  386.         ],
  387.         [
  388.             "Zorita Serrano",
  389.             "Software Engineer",
  390.             "San Francisco",
  391.             "4389",
  392.             "2012\/06\/01",
  393.             "$115,000"
  394.         ],
  395.         [
  396.             "Jennifer Acosta",
  397.             "Junior Javascript Developer",
  398.             "Edinburgh",
  399.             "3431",
  400.             "2013\/02\/01",
  401.             "$75,650"
  402.         ],
  403.         [
  404.             "Cara Stevens",
  405.             "Sales Assistant",
  406.             "New York",
  407.             "3990",
  408.             "2011\/12\/06",
  409.             "$145,600"
  410.         ],
  411.         [
  412.             "Hermione Butler",
  413.             "Regional Director",
  414.             "London",
  415.             "1016",
  416.             "2011\/03\/21",
  417.             "$356,250"
  418.         ],
  419.         [
  420.             "Lael Greer",
  421.             "Systems Administrator",
  422.             "London",
  423.             "6733",
  424.             "2009\/02\/27",
  425.             "$103,500"
  426.         ],
  427.         [
  428.             "Jonas Alexander",
  429.             "Developer",
  430.             "San Francisco",
  431.             "8196",
  432.             "2010\/07\/14",
  433.             "$86,500"
  434.         ],
  435.         [
  436.             "Shad Decker",
  437.             "Regional Director",
  438.             "Edinburgh",
  439.             "6373",
  440.             "2008\/11\/13",
  441.             "$183,000"
  442.         ],
  443.         [
  444.             "Michael Bruce",
  445.             "Javascript Developer",
  446.             "Singapore",
  447.             "5384",
  448.             "2011\/06\/27",
  449.             "$183,000"
  450.         ],
  451.         [
  452.             "Donna Snider",
  453.             "Customer Support",
  454.             "New York",
  455.             "4226",
  456.             "2011\/01\/25",
  457.             "$112,000"
  458.         ]
  459.     ]
  460. }

（3）index_02.html代码

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>DataTables简单用例</title>
  7.         <!--样式-->
  8.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  9.         <!-- jQuery -->
  10.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  11.         <!-- DataTables -->
  12.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  13.         <script type="text/javascript" language="javascript" class="init">
  14.             $(document).ready(function() {
  15.                 $('#example').DataTable({
  16.                     "ajax": "data/arrays.txt"
  17.                 });
  18.             });
  19.         </script>
  20.     </head>
  22.     <body>
  23.         <table id="example" class="display" cellspacing="0" width="100%">
  24.             <thead>
  25.                 <tr>
  26.                     <th>Name</th>
  27.                     <th>Position</th>
  28.                     <th>Office</th>
  29.                     <th>Extn.</th>
  30.                     <th>Start date</th>
  31.                     <th>Salary</th>
  32.                 </tr>
  33.             </thead>
  34.             <tfoot>
  35.                 <tr>
  36.                     <th>Name</th>
  37.                     <th>Position</th>
  38.                     <th>Office</th>
  39.                     <th>Extn.</th>
  40.                     <th>Start date</th>
  41.                     <th>Salary</th>
  42.                 </tr>
  43.             </tfoot>
  44.         </table>
  46.     </body>
  48. </html>

（4）效果图：
image.png

4、例子4:（PS：使用ajax，数据源是对象objects）

通过使用 columns.dataDT 选项用于告诉Datatables找到每一列的数据源对象中对应的属性。
//data:name指的是引用data中name的属性。columns中每一个data顺序就是表格内容的真正顺序
（1）项目结构（多了一个data的文件夹，文件夹里有一个objects.txt文件，）
image.png
（2）objects.txt文件内容

  1. {
  2.     "data": [
  3.         {
  4.             "name": "Tiger Nixon",
  5.             "position": "System Architect",
  6.             "salary": "$320,800",
  7.             "start_date": "2011\/04\/25",
  8.             "office": "Edinburgh",
  9.             "extn": "5421"
  10.         },
  11.         {
  12.             "name": "Garrett Winters",
  13.             "position": "Accountant",
  14.             "salary": "$170,750",
  15.             "start_date": "2011\/07\/25",
  16.             "office": "Tokyo",
  17.             "extn": "8422"
  18.         },
  19.         {
  20.             "name": "Ashton Cox",
  21.             "position": "Junior Technical Author",
  22.             "salary": "$86,000",
  23.             "start_date": "2009\/01\/12",
  24.             "office": "San Francisco",
  25.             "extn": "1562"
  26.         },
  27.         {
  28.             "name": "Cedric Kelly",
  29.             "position": "Senior Javascript Developer",
  30.             "salary": "$433,060",
  31.             "start_date": "2012\/03\/29",
  32.             "office": "Edinburgh",
  33.             "extn": "6224"
  34.         },
  35.         {
  36.             "name": "Airi Satou",
  37.             "position": "Accountant",
  38.             "salary": "$162,700",
  39.             "start_date": "2008\/11\/28",
  40.             "office": "Tokyo",
  41.             "extn": "5407"
  42.         },
  43.         {
  44.             "name": "Brielle Williamson",
  45.             "position": "Integration Specialist",
  46.             "salary": "$372,000",
  47.             "start_date": "2012\/12\/02",
  48.             "office": "New York",
  49.             "extn": "4804"
  50.         },
  51.         {
  52.             "name": "Herrod Chandler",
  53.             "position": "Sales Assistant",
  54.             "salary": "$137,500",
  55.             "start_date": "2012\/08\/06",
  56.             "office": "San Francisco",
  57.             "extn": "9608"
  58.         },
  59.         {
  60.             "name": "Rhona Davidson",
  61.             "position": "Integration Specialist",
  62.             "salary": "$327,900",
  63.             "start_date": "2010\/10\/14",
  64.             "office": "Tokyo",
  65.             "extn": "6200"
  66.         },
  67.         {
  68.             "name": "Colleen Hurst",
  69.             "position": "Javascript Developer",
  70.             "salary": "$205,500",
  71.             "start_date": "2009\/09\/15",
  72.             "office": "San Francisco",
  73.             "extn": "2360"
  74.         },
  75.         {
  76.             "name": "Sonya Frost",
  77.             "position": "Software Engineer",
  78.             "salary": "$103,600",
  79.             "start_date": "2008\/12\/13",
  80.             "office": "Edinburgh",
  81.             "extn": "1667"
  82.         },
  83.         {
  84.             "name": "Jena Gaines",
  85.             "position": "Office Manager",
  86.             "salary": "$90,560",
  87.             "start_date": "2008\/12\/19",
  88.             "office": "London",
  89.             "extn": "3814"
  90.         },
  91.         {
  92.             "name": "Quinn Flynn",
  93.             "position": "Support Lead",
  94.             "salary": "$342,000",
  95.             "start_date": "2013\/03\/03",
  96.             "office": "Edinburgh",
  97.             "extn": "9497"
  98.         },
  99.         {
  100.             "name": "Charde Marshall",
  101.             "position": "Regional Director",
  102.             "salary": "$470,600",
  103.             "start_date": "2008\/10\/16",
  104.             "office": "San Francisco",
  105.             "extn": "6741"
  106.         },
  107.         {
  108.             "name": "Haley Kennedy",
  109.             "position": "Senior Marketing Designer",
  110.             "salary": "$313,500",
  111.             "start_date": "2012\/12\/18",
  112.             "office": "London",
  113.             "extn": "3597"
  114.         },
  115.         {
  116.             "name": "Tatyana Fitzpatrick",
  117.             "position": "Regional Director",
  118.             "salary": "$385,750",
  119.             "start_date": "2010\/03\/17",
  120.             "office": "London",
  121.             "extn": "1965"
  122.         },
  123.         {
  124.             "name": "Michael Silva",
  125.             "position": "Marketing Designer",
  126.             "salary": "$198,500",
  127.             "start_date": "2012\/11\/27",
  128.             "office": "London",
  129.             "extn": "1581"
  130.         },
  131.         {
  132.             "name": "Paul Byrd",
  133.             "position": "Chief Financial Officer (CFO)",
  134.             "salary": "$725,000",
  135.             "start_date": "2010\/06\/09",
  136.             "office": "New York",
  137.             "extn": "3059"
  138.         },
  139.         {
  140.             "name": "Gloria Little",
  141.             "position": "Systems Administrator",
  142.             "salary": "$237,500",
  143.             "start_date": "2009\/04\/10",
  144.             "office": "New York",
  145.             "extn": "1721"
  146.         },
  147.         {
  148.             "name": "Bradley Greer",
  149.             "position": "Software Engineer",
  150.             "salary": "$132,000",
  151.             "start_date": "2012\/10\/13",
  152.             "office": "London",
  153.             "extn": "2558"
  154.         },
  155.         {
  156.             "name": "Dai Rios",
  157.             "position": "Personnel Lead",
  158.             "salary": "$217,500",
  159.             "start_date": "2012\/09\/26",
  160.             "office": "Edinburgh",
  161.             "extn": "2290"
  162.         },
  163.         {
  164.             "name": "Jenette Caldwell",
  165.             "position": "Development Lead",
  166.             "salary": "$345,000",
  167.             "start_date": "2011\/09\/03",
  168.             "office": "New York",
  169.             "extn": "1937"
  170.         },
  171.         {
  172.             "name": "Yuri Berry",
  173.             "position": "Chief Marketing Officer (CMO)",
  174.             "salary": "$675,000",
  175.             "start_date": "2009\/06\/25",
  176.             "office": "New York",
  177.             "extn": "6154"
  178.         },
  179.         {
  180.             "name": "Caesar Vance",
  181.             "position": "Pre-Sales Support",
  182.             "salary": "$106,450",
  183.             "start_date": "2011\/12\/12",
  184.             "office": "New York",
  185.             "extn": "8330"
  186.         },
  187.         {
  188.             "name": "Doris Wilder",
  189.             "position": "Sales Assistant",
  190.             "salary": "$85,600",
  191.             "start_date": "2010\/09\/20",
  192.             "office": "Sidney",
  193.             "extn": "3023"
  194.         },
  195.         {
  196.             "name": "Angelica Ramos",
  197.             "position": "Chief Executive Officer (CEO)",
  198.             "salary": "$1,200,000",
  199.             "start_date": "2009\/10\/09",
  200.             "office": "London",
  201.             "extn": "5797"
  202.         },
  203.         {
  204.             "name": "Gavin Joyce",
  205.             "position": "Developer",
  206.             "salary": "$92,575",
  207.             "start_date": "2010\/12\/22",
  208.             "office": "Edinburgh",
  209.             "extn": "8822"
  210.         },
  211.         {
  212.             "name": "Jennifer Chang",
  213.             "position": "Regional Director",
  214.             "salary": "$357,650",
  215.             "start_date": "2010\/11\/14",
  216.             "office": "Singapore",
  217.             "extn": "9239"
  218.         },
  219.         {
  220.             "name": "Brenden Wagner",
  221.             "position": "Software Engineer",
  222.             "salary": "$206,850",
  223.             "start_date": "2011\/06\/07",
  224.             "office": "San Francisco",
  225.             "extn": "1314"
  226.         },
  227.         {
  228.             "name": "Fiona Green",
  229.             "position": "Chief Operating Officer (COO)",
  230.             "salary": "$850,000",
  231.             "start_date": "2010\/03\/11",
  232.             "office": "San Francisco",
  233.             "extn": "2947"
  234.         },
  235.         {
  236.             "name": "Shou Itou",
  237.             "position": "Regional Marketing",
  238.             "salary": "$163,000",
  239.             "start_date": "2011\/08\/14",
  240.             "office": "Tokyo",
  241.             "extn": "8899"
  242.         },
  243.         {
  244.             "name": "Michelle House",
  245.             "position": "Integration Specialist",
  246.             "salary": "$95,400",
  247.             "start_date": "2011\/06\/02",
  248.             "office": "Sidney",
  249.             "extn": "2769"
  250.         },
  251.         {
  252.             "name": "Suki Burks",
  253.             "position": "Developer",
  254.             "salary": "$114,500",
  255.             "start_date": "2009\/10\/22",
  256.             "office": "London",
  257.             "extn": "6832"
  258.         },
  259.         {
  260.             "name": "Prescott Bartlett",
  261.             "position": "Technical Author",
  262.             "salary": "$145,000",
  263.             "start_date": "2011\/05\/07",
  264.             "office": "London",
  265.             "extn": "3606"
  266.         },
  267.         {
  268.             "name": "Gavin Cortez",
  269.             "position": "Team Leader",
  270.             "salary": "$235,500",
  271.             "start_date": "2008\/10\/26",
  272.             "office": "San Francisco",
  273.             "extn": "2860"
  274.         },
  275.         {
  276.             "name": "Martena Mccray",
  277.             "position": "Post-Sales support",
  278.             "salary": "$324,050",
  279.             "start_date": "2011\/03\/09",
  280.             "office": "Edinburgh",
  281.             "extn": "8240"
  282.         },
  283.         {
  284.             "name": "Unity Butler",
  285.             "position": "Marketing Designer",
  286.             "salary": "$85,675",
  287.             "start_date": "2009\/12\/09",
  288.             "office": "San Francisco",
  289.             "extn": "5384"
  290.         },
  291.         {
  292.             "name": "Howard Hatfield",
  293.             "position": "Office Manager",
  294.             "salary": "$164,500",
  295.             "start_date": "2008\/12\/16",
  296.             "office": "San Francisco",
  297.             "extn": "7031"
  298.         },
  299.         {
  300.             "name": "Hope Fuentes",
  301.             "position": "Secretary",
  302.             "salary": "$109,850",
  303.             "start_date": "2010\/02\/12",
  304.             "office": "San Francisco",
  305.             "extn": "6318"
  306.         },
  307.         {
  308.             "name": "Vivian Harrell",
  309.             "position": "Financial Controller",
  310.             "salary": "$452,500",
  311.             "start_date": "2009\/02\/14",
  312.             "office": "San Francisco",
  313.             "extn": "9422"
  314.         },
  315.         {
  316.             "name": "Timothy Mooney",
  317.             "position": "Office Manager",
  318.             "salary": "$136,200",
  319.             "start_date": "2008\/12\/11",
  320.             "office": "London",
  321.             "extn": "7580"
  322.         },
  323.         {
  324.             "name": "Jackson Bradshaw",
  325.             "position": "Director",
  326.             "salary": "$645,750",
  327.             "start_date": "2008\/09\/26",
  328.             "office": "New York",
  329.             "extn": "1042"
  330.         },
  331.         {
  332.             "name": "Olivia Liang",
  333.             "position": "Support Engineer",
  334.             "salary": "$234,500",
  335.             "start_date": "2011\/02\/03",
  336.             "office": "Singapore",
  337.             "extn": "2120"
  338.         },
  339.         {
  340.             "name": "Bruno Nash",
  341.             "position": "Software Engineer",
  342.             "salary": "$163,500",
  343.             "start_date": "2011\/05\/03",
  344.             "office": "London",
  345.             "extn": "6222"
  346.         },
  347.         {
  348.             "name": "Sakura Yamamoto",
  349.             "position": "Support Engineer",
  350.             "salary": "$139,575",
  351.             "start_date": "2009\/08\/19",
  352.             "office": "Tokyo",
  353.             "extn": "9383"
  354.         },
  355.         {
  356.             "name": "Thor Walton",
  357.             "position": "Developer",
  358.             "salary": "$98,540",
  359.             "start_date": "2013\/08\/11",
  360.             "office": "New York",
  361.             "extn": "8327"
  362.         },
  363.         {
  364.             "name": "Finn Camacho",
  365.             "position": "Support Engineer",
  366.             "salary": "$87,500",
  367.             "start_date": "2009\/07\/07",
  368.             "office": "San Francisco",
  369.             "extn": "2927"
  370.         },
  371.         {
  372.             "name": "Serge Baldwin",
  373.             "position": "Data Coordinator",
  374.             "salary": "$138,575",
  375.             "start_date": "2012\/04\/09",
  376.             "office": "Singapore",
  377.             "extn": "8352"
  378.         },
  379.         {
  380.             "name": "Zenaida Frank",
  381.             "position": "Software Engineer",
  382.             "salary": "$125,250",
  383.             "start_date": "2010\/01\/04",
  384.             "office": "New York",
  385.             "extn": "7439"
  386.         },
  387.         {
  388.             "name": "Zorita Serrano",
  389.             "position": "Software Engineer",
  390.             "salary": "$115,000",
  391.             "start_date": "2012\/06\/01",
  392.             "office": "San Francisco",
  393.             "extn": "4389"
  394.         },
  395.         {
  396.             "name": "Jennifer Acosta",
  397.             "position": "Junior Javascript Developer",
  398.             "salary": "$75,650",
  399.             "start_date": "2013\/02\/01",
  400.             "office": "Edinburgh",
  401.             "extn": "3431"
  402.         },
  403.         {
  404.             "name": "Cara Stevens",
  405.             "position": "Sales Assistant",
  406.             "salary": "$145,600",
  407.             "start_date": "2011\/12\/06",
  408.             "office": "New York",
  409.             "extn": "3990"
  410.         },
  411.         {
  412.             "name": "Hermione Butler",
  413.             "position": "Regional Director",
  414.             "salary": "$356,250",
  415.             "start_date": "2011\/03\/21",
  416.             "office": "London",
  417.             "extn": "1016"
  418.         },
  419.         {
  420.             "name": "Lael Greer",
  421.             "position": "Systems Administrator",
  422.             "salary": "$103,500",
  423.             "start_date": "2009\/02\/27",
  424.             "office": "London",
  425.             "extn": "6733"
  426.         },
  427.         {
  428.             "name": "Jonas Alexander",
  429.             "position": "Developer",
  430.             "salary": "$86,500",
  431.             "start_date": "2010\/07\/14",
  432.             "office": "San Francisco",
  433.             "extn": "8196"
  434.         },
  435.         {
  436.             "name": "Shad Decker",
  437.             "position": "Regional Director",
  438.             "salary": "$183,000",
  439.             "start_date": "2008\/11\/13",
  440.             "office": "Edinburgh",
  441.             "extn": "6373"
  442.         },
  443.         {
  444.             "name": "Michael Bruce",
  445.             "position": "Javascript Developer",
  446.             "salary": "$183,000",
  447.             "start_date": "2011\/06\/27",
  448.             "office": "Singapore",
  449.             "extn": "5384"
  450.         },
  451.         {
  452.             "name": "Donna Snider",
  453.             "position": "Customer Support",
  454.             "salary": "$112,000",
  455.             "start_date": "2011\/01\/25",
  456.             "office": "New York",
  457.             "extn": "4226"
  458.         }
  459.     ]
  460. }

对比数据源是数组（左边）和对象（右边）格式的不同
image.png
（3）index_02.html内容

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>DataTables简单用例</title>
  7.         <!--样式-->
  8.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  9.         <!-- jQuery -->
  10.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  11.         <!-- DataTables -->
  12.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  13.         <script type="text/javascript" language="javascript" class="init">
  14.             $(document).ready(function() {
  15.                 $('#example').DataTable({
  16.                     "ajax": "data/objects.txt", 
  17.                     //data:name指的是引用data中name的属性。columns中每一个data顺序就是表格内容的真正顺序
  18.                     "columns": [{
  19.                         "data": "name"
  20.                     }, {
  21.                         "data": "position"
  22.                     }, {
  23.                         "data": "office"
  24.                     }, {
  25.                         "data": "extn"
  26.                     }, {
  27.                         "data": "start_date"
  28.                     }, {
  29.                         "data": "salary"
  30.                     }]
  31.                 });
  32.             });
  33.         </script>
  34.     </head>
  36.     <body>
  37.         <table id="example" class="display" cellspacing="0" width="100%">
  38.             <thead>
  39.                 <tr>
  40.                     <th>Name</th>
  41.                     <th>Position</th>
  42.                     <th>Office</th>
  43.                     <th>Extn.</th>
  44.                     <th>Start date</th>
  45.                     <th>Salary</th>
  46.                 </tr>
  47.             </thead>
  48.             <tfoot>
  49.                 <tr>
  50.                     <th>Name</th>
  51.                     <th>Position</th>
  52.                     <th>Office</th>
  53.                     <th>Extn.</th>
  54.                     <th>Start date</th>
  55.                     <th>Salary</th>
  56.                 </tr>
  57.             </tfoot>
  58.         </table>
  60.     </body>
  62. </html>

（4）效果
image.png

5、例子5:（PS：使用ajax，不指定数据源属性）

当从 Ajax 源加载数据，在默认情况下，数据表将寻找要使用返回的对象的数据参数中的数据。
dataSrc有许多用法如下：

  • 作为一个字符串，如 dataSrc: ‘myData’
  • 为空字符串，如 dataSrc:””，下面的例子展示的是这个用法
  • 作为一个方法，如 dataSrc： function(json) {} （您可以从 XML 转换到一个 Javascript 对象）
    1. $(document).ready(function() {
    2.     $('#example').dataTable( {
    3.         "ajax": {
    4.             "url": "data/objects_root_array.txt",
    5.             //默认为data,这里定义为空，则只需要传不带属性的数据
    6.             "dataSrc": ""
    7.         },
    8.         "columns": [
    9.             { "data": "name" },
    10.             { "data": "position" },
    11.             { "data": "office" },
    12.             { "data": "extn" },
    13.             { "data": "start_date" },
    14.             { "data": "salary" }
    15.         ]
    16.     } );
    17. } );
    效果：如上图例子所示

    6、例子6:（PS：动态显示和隐藏列）

    这个例子演示了 column().visible()方法来隐藏显示列，通过点击列按钮动态切换。
    （1）项目结构（PS：新增加的index_03.css）
    image.png
    （2）index_03.css文件 ```html /表格字体/ body { font: 90%/1.45em “Helvetica Neue”, HelveticaNeue, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff; }

/column的字体颜色和小手/ a { cursor: pointer; color: #3174c7; text-decoration: none; }

  1. （3）objects.txt文件内容参考上的例子内容<br />（4）index_03.html文件
  2. ```html
  3. <!DOCTYPE html>
  4. <html>
  6.     <head>
  7.         <meta charset="utf-8" />
  8.         <title>DataTables简单用例</title>
  9.         <!--自己样式-->
  10.         <link rel="stylesheet" type="text/css" href="css/index_03.css"/>
  11.         <!--样式-->
  12.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  13.         <!-- jQuery -->
  14.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  15.         <!-- DataTables -->
  16.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  17.         <script type="text/javascript" language="javascript" class="init">
  18.             $(document).ready(function() {
  19.                 var table = $("#example").DataTable({
  20.                     "ajax": "data/objects.txt",
  21.                     "columns": [{
  22.                         "data": "name"
  23.                     }, {
  24.                         "data": "position"
  25.                     }, {
  26.                         "data": "office"
  27.                     }, {
  28.                         "data": "extn"
  29.                     }, {
  30.                         "data": "start_date"
  31.                     }, {
  32.                         "data": "salary"
  33.                     }],
  34.                     //展示高度
  35.                     "scrollY": "300px",
  36.                     //显示多少行去掉
  37.                     "paging": false
  38.                 });
  39.                 //显示和隐藏
  40.                 $('a.toggle-vis').on('click', function(e) {
  41.                     e.preventDefault();
  42.                     // Get the column API object
  43.                     var column = table.column($(this).attr('data-column'));
  44.                     // Toggle the visibility
  45.                     column.visible(!column.visible());
  46.                 });
  47.             });
  48.         </script>
  49.     </head>
  51.     <body>
  52.         <!--索引-->
  53.         <div class="demo-html">
  54.             <div>
  55.                 Toggle column:
  56.                 <a class="toggle-vis" data-column="0">Name</a> -
  57.                 <a class="toggle-vis" data-column="1">Position</a> -
  58.                 <a class="toggle-vis" data-column="2">Office</a> -
  59.                 <a class="toggle-vis" data-column="3">Age</a> -
  60.                 <a class="toggle-vis" data-column="4">Start date</a> -
  61.                 <a class="toggle-vis" data-column="5">Salary</a>
  62.             </div>
  63.         </div>
  64.         <!--正式table-->
  65.         <table id="example" class="display" cellspacing="0" width="100%">
  66.             <thead>
  67.                 <tr>
  68.                     <th>Name</th>
  69.                     <th>Position</th>
  70.                     <th>Office</th>
  71.                     <th>Extn.</th>
  72.                     <th>Start date</th>
  73.                     <th>Salary</th>
  74.                 </tr>
  75.             </thead>
  76.             <tfoot>
  77.                 <tr>
  78.                     <th>Name</th>
  79.                     <th>Position</th>
  80.                     <th>Office</th>
  81.                     <th>Extn.</th>
  82.                     <th>Start date</th>
  83.                     <th>Salary</th>
  84.                 </tr>
  85.             </tfoot>
  86.         </table>
  88.     </body>
  90. </html>

（5）效果所示image.png

7、例子7:（PS：在回调方法中使用api）

有时候希望给表格绑定的数据行绑定一些事件，这个时候你需要用到 initCompleteDT 、rowCallback 这些回调方法，下面的例子演示了，当表格加载完后给表格的td绑定点击事件，取到值后进行搜索
（1）项目结构
image.png
（2）index_03.css文件参照上一个例子
（3）objects.txt文件参照上面的例子
（4）index_04.html文件

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>DataTables简单用例</title>
  7.         <!--自己样式-->
  8.         <link rel="stylesheet" type="text/css" href="css/index_03.css"/>
  9.         <!--样式-->
  10.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  11.         <!-- jQuery -->
  12.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  13.         <!-- DataTables -->
  14.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  15.         <script type="text/javascript" language="javascript" class="init">
  16.             $(document).ready(function() {
  17.                 var table = $("#example").DataTable({
  18.                     "ajax": "data/objects.txt",
  19.                     "columns": [{
  20.                         "data": "name"
  21.                     }, {
  22.                         "data": "position"
  23.                     }, {
  24.                         "data": "office"
  25.                     }, {
  26.                         "data": "extn"
  27.                     }, {
  28.                         "data": "start_date"
  29.                     }, {
  30.                         "data": "salary"
  31.                     }],
  32.                     //展示高度
  33. //                    "scrollY": "300px",
  34.                     //显示多少行去掉
  35. //                    "paging": false
  36.                     //右下角的分页
  37.                     "initComplete":function(){
  38.                         var api=this.api();
  39.                         api.$("td").click(function(){
  40.                             api.search(this.innerHTML).draw();
  41.                         })
  42.                     }
  43.                 });
  44.                 //显示和隐藏哪一列
  45.                 $('a.toggle-vis').on('click', function(e) {
  46.                     e.preventDefault();
  47.                     // Get the column API object
  48.                     var column = table.column($(this).attr('data-column'));
  49.                     // Toggle the visibility
  50.                     column.visible(!column.visible());
  51.                 });
  52.             });
  53.         </script>
  54.     </head>
  56.     <body>
  57.         <!--索引-->
  58.         <div class="demo-html">
  59.             <div>
  60.                 Toggle column:
  61.                 <a class="toggle-vis" data-column="0">Name</a> -
  62.                 <a class="toggle-vis" data-column="1">Position</a> -
  63.                 <a class="toggle-vis" data-column="2">Office</a> -
  64.                 <a class="toggle-vis" data-column="3">Age</a> -
  65.                 <a class="toggle-vis" data-column="4">Start date</a> -
  66.                 <a class="toggle-vis" data-column="5">Salary</a>
  67.             </div>
  68.         </div>
  69.         <!--正式table-->
  70.         <table id="example" class="display" cellspacing="0" width="100%">
  71.             <thead>
  72.                 <tr>
  73.                     <th>Name</th>
  74.                     <th>Position</th>
  75.                     <th>Office</th>
  76.                     <th>Extn.</th>
  77.                     <th>Start date</th>
  78.                     <th>Salary</th>
  79.                 </tr>
  80.             </thead>
  81.             <tfoot>
  82.                 <tr>
  83.                     <th>Name</th>
  84.                     <th>Position</th>
  85.                     <th>Office</th>
  86.                     <th>Extn.</th>
  87.                     <th>Start date</th>
  88.                     <th>Salary</th>
  89.                 </tr>
  90.             </tfoot>
  91.         </table>
  93.     </body>
  95. </html>

（5）效果如图image.png

三、稍微复杂的例子

8、例子8:（PS：显示行的附加信息）

使用Ajax调用服务器来获得行的附加信息。
（1）项目结构
image.png
（2）index_03.css

  1. /*表格字体*/
  3. body {
  4.     font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;
  5.     margin: 0;
  6.     padding: 0;
  7.     color: #333;
  8.     background-color: #fff;
  9. }
  12. /*column的字体颜色和小手*/
  14. a {
  15.     cursor: pointer;
  16.     color: #3174c7;
  17.     text-decoration: none;
  18. }
  21. /*显示显示和影藏按钮*/
  23. td.details-control {
  24.     background: url(../img/details_open.png) no-repeat center center;
  25.     cursor: pointer;
  26. }
  28. tr.shown td.details-control {
  29.     background: url(../img/details_close.png) no-repeat center center;
  30. }

（3）objects.js文件和objects.txt文件内容一样，你使用js和txt是一样的，只要里面存的数据是对的就行
（4）添加img两个图片
（5）index_05.htm

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>DataTables简单用例</title>
  7.         <!--自己样式-->
  8.         <link rel="stylesheet" type="text/css" href="css/index_03.css" />
  9.         <!--样式-->
  10.         <link rel="stylesheet" type="text/css" href="DataTables-1.10.13/media/css/jquery.dataTables.css">
  11.         <!-- jQuery -->
  12.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.js"></script>
  13.         <!-- DataTables -->
  14.         <script type="text/javascript" charset="utf8" src="DataTables-1.10.13/media/js/jquery.dataTables.js"></script>
  15.         <script type="text/javascript" language="javascript" class="init">
  16.             //格式函数
  17.             function format(d) {
  18.                 // `d` is the original data object for the row
  19.                 return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
  20.                     '<tr>' +
  21.                     '<td>Full name:</td>' +
  22.                     '<td>' + d.name + '</td>' +
  23.                     '</tr>' +
  24.                     '<tr>' +
  25.                     '<td>Extension number:</td>' +
  26.                     '<td>' + d.extn + '</td>' +
  27.                     '</tr>' +
  28.                     '<tr>' +
  29.                     '<td>Extra info:</td>' +
  30.                     '<td>And any further details here (images etc)...</td>' +
  31.                     '</tr>' +
  32.                     '</table>';
  33.             }
  34.             //ready
  35.             $(document).ready(function() {
  36.                 var table = $("#example").DataTable({
  37.                     "ajax": "/DataTables_simple/data/objects.js",
  38.                     "columns": [{
  39.                         "className": 'details-control',
  40.                         "orderable": false,
  41.                         "data": null,
  42.                         "defaultContent": ''
  43.                     }, {
  44.                         "data": "name"
  45.                     }, {
  46.                         "data": "position"
  47.                     }, {
  48.                         "data": "office"
  49.                     }, {
  50.                         "data": "salary"
  51.                     }],
  52.                     //默认显示是升序
  53.                     "order": [
  54.                         [1, 'asc']
  55.                     ],
  57.                     //展示高度
  58.                     //    "scrollY": "300px",
  59.                     //显示多少行去掉
  60.                     //    "paging": false
  62.                     //右下角的分页
  63.                         "initComplete": function() {
  64.                         var api = this.api();
  65.                         api.$("td").click(function() {
  66.                             api.search(this.innerHTML).draw();
  67.                         })
  68.                     }
  69.                 });
  70.                 //显示和隐藏哪一列
  71.                 $('a.toggle-vis').on('click', function(e) {
  72.                     e.preventDefault();
  73.                     // Get the column API object
  74.                     var column = table.column($(this).attr('data-column'));
  75.                     // Toggle the visibility
  76.                     column.visible(!column.visible());
  77.                 });
  79.                 //按钮显示和隐藏  Add event listener for opening and closing details
  80.                 $('#example tbody').on('click', 'td.details-control', function() {
  81.                     var tr = $(this).closest('tr');
  82.                     var row = table.row(tr);
  83.                     if(row.child.isShown()) {
  84.                         // This row is already open - close it
  85.                         row.child.hide();
  86.                         tr.removeClass('shown');
  87.                     } else {
  88.                         // Open this row
  89.                         row.child(format(row.data())).show();
  90.                         tr.addClass('shown');
  91.                     }
  92.                 });
  93.             });
  94.         </script>
  95.     </head>
  97.     <body>
  98.         <!--索引-->
  99.         <div class="demo-html">
  100.             <div>
  101.                 Toggle column:
  102.                 <a class="toggle-vis" data-column="1">Name</a> -
  103.                 <a class="toggle-vis" data-column="2">Position</a> -
  104.                 <a class="toggle-vis" data-column="3">Office</a> -
  105.                 <a class="toggle-vis" data-column="4">Salary</a>
  106.             </div>
  107.         </div>
  108.         <!--正式table-->
  109.         <table id="example" class="display" cellspacing="0" width="100%">
  110.             <thead>
  111.                 <tr>
  112.                     <th></th>
  113.                     <th>Name</th>
  114.                     <th>Position</th>
  115.                     <th>Office</th>
  116.                     <th>Salary</th>
  117.                 </tr>
  118.             </thead>
  119.             <tfoot>
  120.                 <tr>
  121.                     <th></th>
  122.                     <th>Name</th>
  123.                     <th>Position</th>
  124.                     <th>Office</th>
  125.                     <th>Salary</th>
  126.                 </tr>
  127.             </tfoot>
  128.         </table>
  130.     </body>
  132. </html>

（6）效果如图
image.png

三、报错问题的解决
image.png
会出现这种错误，是对数据进行解析出错，需要你检查地方如下所示
image.png
1、数据的路径容易错，很容易错，
2、数据解析的方式容易错，与txt或者js里存的数据格式要对应上