如何设置数据表？

Question

Ok so I have a table of t-shirt designs, and I'm trying to use DataTables. I used the download builder and chose the buttons extension. The table seems to be using DataTables, but I dont see the paginate. Am I missing something? Sorry I'm very new to DataTables.

 <script src="//code.jquery.com/jquery-1.12.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,r-2.0.2/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,r-2.0.2/datatables.min.js"></script> <script>$(document).ready(function() { $('#example').dataTable(); }); </script> 

 #mainProduct { background-color: #E8E8E8; border: solid white; } .container { max-width: 100%; background-color: black; margin-left: 15px; text-align: center; position: relative; } .container div { background-color: white; width: 100%; display: inline-block; display: none; } .container img { width: 100%; height: auto; } .card-container { height: 200px; perspective: 600; position: relative; width: 200px; } .card { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%; } .card:hover { transform: rotateY(180deg); } .card .side { backface-visibility: hidden; height: 100%; position: absolute; width: 100%; } .card .back { transform: rotateY(180deg); } #example {margin-left: 15px;} #description {text-align:center; margin-top: 25%; font-size: 12px;} 

 <!-- Product listings --> <table id="example" class="display" cellspacing="0" text-align="center"> <!--T-REX COFFEE--> <tr> <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366446"> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t12.deviantart.net/BrcRPOF9yezzdQA7qI0GGt9CQpA=/300x200/filters:fixed_height(100,100):origin()/pre02/0cc5/th/pre/i/2016/059/a/a/1_t_rex_coffee_by_mizoodesigns-d9tfftx.png"> </div> <div class="side back"> <p id="description">What better way to show you love coffee than with a prehistoric predator!</p> </div> </div> </div> </a> </td> <!--TAFFY CAT BATUSI--> <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366550"> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t02.deviantart.net/_WQLrq--RN0K8ixtplOOzyahVko=/300x200/filters:fixed_height(100,100):origin()/pre14/aefe/th/pre/i/2016/059/b/7/14_taffycat_batusi_by_mizoodesigns-d9tfg15.png"> </div> <div class="side back"><p id="description">What's better than Taffy Cat doing the Batusi? Taffy cat doing the Batusi on a t-shirt!</p> </div> </div> </div> </a> </td> <!--SMILEY CONVERSE--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t12.deviantart.net/kxTUWMz6TsfYVFSd_YSycsGW70I=/300x200/filters:fixed_height(100,100):origin()/pre09/bbd1/th/pre/i/2016/059/8/f/36_smiley_red_shoe_by_mizoodesigns-d9tfg7p.png"> </div> <div class="side back"><p id="description">Smiley red shoe. Because ... shoe!</p> </div> </div> </div> </a> </td> </tr> <tr> <!--I'M BUFF--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t07.deviantart.net/UCKBK6KyJzceGbuB8szw-ucEZ2Y=/300x200/filters:fixed_height(100,100):origin()/pre09/a544/th/pre/i/2016/059/e/9/18_buff_by_mizoodesigns-d9tfq5g.png"> </div> <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p> </div> </div> </div> </a> </td> <!--Curvy--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t08.deviantart.net/Lljv-RDFIKZCRuTf-GAxc0_BI0o=/300x200/filters:fixed_height(100,100):origin()/pre06/da78/th/pre/i/2016/059/7/c/19_curvy_by_mizoodesigns-d9tfqau.png"> </div> <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p> </div> </div> </div> </a> </td> <!--Love female&female--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t01.deviantart.net/hGoyHjNSwG-HMyz4tBPYyWBJnD8=/300x200/filters:fixed_height(100,100):origin()/pre01/bc6e/th/pre/i/2016/059/c/8/42_love3_by_mizoodesigns-d9tfo91.png"> </div> <div class="side back"><p id="description">Celebrate love and diversity!</p> </div> </div> </div> </a> </td> </tr> <tr> <!--love male&male--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t04.deviantart.net/cgbfKcYI8e56QSdswTVHPMG8LOI=/300x200/filters:fixed_height(100,100):origin()/pre12/3e14/th/pre/i/2016/059/2/b/41_love2_by_mizoodesigns-d9tfo4w.png"> </div> <div class="side back"><p id="description">Celebrate love and diversity!</p> </div> </div> </div> </a> </td> <!--420 Deadpool--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t08.deviantart.net/yUSAlWXmNVP8S_eBilkJrQVe3h0=/300x200/filters:fixed_height(100,100):origin()/pre01/9557/th/pre/i/2016/059/2/d/26_420pool_by_mizoodesigns-d9tfltp.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--Super Taffy Cat--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t07.deviantart.net/_ynkAcDVU3UrjIgmeUhz49Itxzs=/300x200/filters:fixed_height(100,100):origin()/pre10/c388/th/pre/i/2016/059/5/c/15_taffycat14_by_mizoodesigns-d9tfmhe.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> </tr> <tr> <!--Taffy Cat book--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--Prop of 420--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--All that list--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> </tr> <tr> <!--Taffy Cat book--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--Prop of 420--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--All that list--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> </tr> </table> 

Answer 1

Moved my answer to jsfiddle b/ci hate stack overflows code editor. https://jsfiddle.net/guanzo/3tjf87kt/1/

From the official docs http://legacy.datatables.net/usage/

In order for DataTables to be able to function correctly, the HTML for the target table must be laid out in a well formed manner with the 'thead' and 'tbody' sections declared. For example:

All i did was add a thead

<thead>
    <tr>
        <th>one</th>
        <th>two</th>
        <th>three</th>
    </tr>
</thead>

And wrap your existing rows with a tbody

Answer 2

Here is a working Fiddle

You had to format the table to have proper thead tags and tbody , only then the plugin will apply the datatables without errors. For more info read more here

 $('#example').dataTable(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,r-2.0.2/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/t/dt/jqc-1.12.0,dt-1.10.11,b-1.1.2,b-colvis-1.1.2,r-2.0.2/datatables.min.js"></script> <table id="example" class="display" cellspacing="0" text-align="center"> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <!--T-REX COFFEE--> <tr> <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366446"> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t12.deviantart.net/BrcRPOF9yezzdQA7qI0GGt9CQpA=/300x200/filters:fixed_height(100,100):origin()/pre02/0cc5/th/pre/i/2016/059/a/a/1_t_rex_coffee_by_mizoodesigns-d9tfftx.png"> </div> <div class="side back"> <p id="description">What better way to show you love coffee than with a prehistoric predator!</p> </div> </div> </div> </a> </td> <!--TAFFY CAT BATUSI--> <td id="mainProduct"><a href="http://www.cafepress.com/mizoo/13366550"> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t02.deviantart.net/_WQLrq--RN0K8ixtplOOzyahVko=/300x200/filters:fixed_height(100,100):origin()/pre14/aefe/th/pre/i/2016/059/b/7/14_taffycat_batusi_by_mizoodesigns-d9tfg15.png"> </div> <div class="side back"><p id="description">What's better than Taffy Cat doing the Batusi? Taffy cat doing the Batusi on a t-shirt!</p> </div> </div> </div> </a> </td> <!--SMILEY CONVERSE--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t12.deviantart.net/kxTUWMz6TsfYVFSd_YSycsGW70I=/300x200/filters:fixed_height(100,100):origin()/pre09/bbd1/th/pre/i/2016/059/8/f/36_smiley_red_shoe_by_mizoodesigns-d9tfg7p.png"> </div> <div class="side back"><p id="description">Smiley red shoe. Because ... shoe!</p> </div> </div> </div> </a> </td> </tr> <tr> <!--I'M BUFF--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t07.deviantart.net/UCKBK6KyJzceGbuB8szw-ucEZ2Y=/300x200/filters:fixed_height(100,100):origin()/pre09/a544/th/pre/i/2016/059/e/9/18_buff_by_mizoodesigns-d9tfq5g.png"> </div> <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p> </div> </div> </div> </a> </td> <!--Curvy--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t08.deviantart.net/Lljv-RDFIKZCRuTf-GAxc0_BI0o=/300x200/filters:fixed_height(100,100):origin()/pre06/da78/th/pre/i/2016/059/7/c/19_curvy_by_mizoodesigns-d9tfqau.png"> </div> <div class="side back"><p id="description">Because thinking you are something is half the journey of being something ...</p> </div> </div> </div> </a> </td> <!--Love female&female--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t01.deviantart.net/hGoyHjNSwG-HMyz4tBPYyWBJnD8=/300x200/filters:fixed_height(100,100):origin()/pre01/bc6e/th/pre/i/2016/059/c/8/42_love3_by_mizoodesigns-d9tfo91.png"> </div> <div class="side back"><p id="description">Celebrate love and diversity!</p> </div> </div> </div> </a> </td> </tr> <tr> <!--love male&male--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t04.deviantart.net/cgbfKcYI8e56QSdswTVHPMG8LOI=/300x200/filters:fixed_height(100,100):origin()/pre12/3e14/th/pre/i/2016/059/2/b/41_love2_by_mizoodesigns-d9tfo4w.png"> </div> <div class="side back"><p id="description">Celebrate love and diversity!</p> </div> </div> </div> </a> </td> <!--420 Deadpool--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t08.deviantart.net/yUSAlWXmNVP8S_eBilkJrQVe3h0=/300x200/filters:fixed_height(100,100):origin()/pre01/9557/th/pre/i/2016/059/2/d/26_420pool_by_mizoodesigns-d9tfltp.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--Super Taffy Cat--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t07.deviantart.net/_ynkAcDVU3UrjIgmeUhz49Itxzs=/300x200/filters:fixed_height(100,100):origin()/pre10/c388/th/pre/i/2016/059/5/c/15_taffycat14_by_mizoodesigns-d9tfmhe.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> </tr> <tr> <!--Taffy Cat book--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--Prop of 420--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--All that list--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> </tr> <tr> <!--Taffy Cat book--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t02.deviantart.net/D6FyR9Ku_FWdtRRSJQSH90Fy9z4=/300x200/filters:fixed_height(100,100):origin()/pre11/5f3a/th/pre/i/2016/059/6/4/13_taffycat12_by_mizoodesigns-d9tfng8.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--Prop of 420--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t15.deviantart.net/Br5zZ0fwMNx3Tyebl0HT7TjB9GI=/300x200/filters:fixed_height(100,100):origin()/pre06/32ac/th/pre/i/2016/059/9/4/24_propertyof420_by_mizoodesigns-d9tfope.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> <!--All that list--> <td id="mainProduct"><a href=""> <div class="card-container"> <div class="card"> <div class="side"><img src="http://t09.deviantart.net/ugkgkxMIkDWBjB-SEKEJDpHE4Zs=/300x200/filters:fixed_height(100,100):origin()/pre02/00e6/th/pre/i/2016/059/b/c/43__checklist_by_mizoodesigns-d9tfkdq.png"> </div> <div class="side back"><p id="description"></p> </div> </div> </div> </a> </td> </tr> </tbody> </table> 

So as mentioned the only problem was you missed out the thead tag and also to wrap your tr tags inside a tbody