Django使用DataTables插件总结

文章中例子已上传至github

基本使用

Datatables插件是一款方便简单的展示数据的列表插件。关于基本使用，官方网站上的已介绍的很详细，这里我再稍微过一下。

1. js配置。包含jquery和datatables的js

   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script stc="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

2. css配置。包含dataTables的css

    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
   

3. html。初始化表格

    <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>
           </tbody>
       </table>
   

4. js配置。是表格dataTable化

    <script type="text/javascript">
        $(document).ready(function() {
        
           $('#example').DataTable();
       } );
    </script>
   

与django结合使用

这里以一个展示用户姓名年龄的表格举例。假设数据库(数据库使用Django默认自带数据库)中有表格User,它的字段有name、age两项。

基本使用

基本使用的话，则是django作为后端，将要显示的数据传给DataTables进行展示。具体用法比较简单，DataTables的官网也很详细了。(官网文档都是第一份资料)
不多说，直接上代码

def get_basic_tables(request):