后端开发不会前端之表格插件的使用

1. 需求描述：

   -数据分页
   -搜索展示()
   -数据列排序、多列排序
   -不想写接口
   -支持自定义
   
   缺点：
   	不适合大量数据展示：随着数据量的增加，页面渲染速度明显变慢
   	
   Tips:
   	大量数据还是采用数据库切片搜索较为妥当。
   

2. 插件地址：

   https://www.datatables.net/
   

3. 效果测试：

   • 基础配置：

     ​ 配置说明：正常编写django渲染数据的逻辑，添加datables.js文件。添加js代码配置datables.js。页面美化：根据生成后的页面找到对应的class名、id名编写自定义的css、js样式

     html:

     {% extends 'base/base.html' %}
     {% load static %}
     
     {% block scriptscript %}
     <link rel="stylesheet" href="{% static 'examine_system/css/dataTables.bootstrap4.css' %}">
     <link rel="stylesheet" href="{% static 'examine_system/css/index.css' %}">
     <script src="{% static 'examine_system/js/jquery.dataTables.js' %}"></script>
     <script src="{% static 'examine_system/js/dataTables.bootstrap4.js' %}"></script>
     
     {% endblock %}
     {% block body %}
     
     
     <div style="margin-top: 10px; ">
         <table id="report_list" class="table table-hover" cellspacing="0">
             <thead>
             <tr class="active">
                 <th>#</th>
                 <th class="table-font">报告名称</th>
                 <th class="table-font" width="60">添加人</th>
                 <th class="table-font">添加时间</th>
                 <th class="table-font" width="60">流程阶段</th>
                 <th class="table-font" width="60">审核人1</th>
                 <th class="table-font" width="60">审核人2</th>
             </tr>
             </thead>
             <tbody>
             {% for row in report_list %}
             <tr>
                 <td>{{ row.id }}</td>
                 <td class="mono small"><a href="{% url 'examine_system_show_report' %}?id={{ row.id }}&action={{ action }}">{{ row.report_name }}</a></td>
                 <td>{{ row.submit_person }}</td>
                 <td>{{ row.submit_time }}</td>
                 <td>{{ row.get_report_status_display }}</td>
                 <td>{{ row.examine_system.examine_person1 }}</td>
                 <td>{{ row.examine_system.examine_person2 }}</td>
             </tr>
             {% endfor %}
             </tbody>
     
         </table>
     </div>
     {% endblock %}
     
     {% block script %}
     <script>
         $(document).ready(function () {
             $('#report_list').DataTable({
                 "pagingType": "full_numbers",
                 "order": [[0, "desc"]],
                 "oLanguage": {
                     "sLengthMenu": "每页显示 _MENU_ 条记录",
                     "sZeroRecords": "抱歉， 没有找到",
                     "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                     "sInfoEmpty": "没有数据",
                     "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                     "oPaginate": {
                         "sFirst": "首页",
                         "sPrevious": "前一页",
                         "sNext": "后一页",
                         "sLast": "尾页"
                     },
                 }
             });
         });
     </script>
     {% endblock %}
     

   • 效果图：

     

   • 自定义表格js

     增加过滤功能

     js:

     function filterColumn ( i,v ) {
         var table = $('#main_datatable').DataTable();
         table.column( i ).search(
             v,false,true
         );
         table.draw();
     }
     function hideFuncColumn() {
         var theadIdColumn = $("#filter_table thead td");
         var tfootIdColumn = $("#filter_table tfoot td");
         console.log($(this).text())
     
     }
     function hideColumn(){
         var theadIdColumn = $("#filter_table thead td");
         var tfootIdColumn = $("#filter_table tfoot td");
         theadIdColumn.first().remove();
         tfootIdColumn.first().remove();
         theadIdColumn.last().remove();
         tfootIdColumn.last().remove();
     
     }
         $(document).ready(function () {
             $('#main_datatable').DataTable({
                 "order": [[0, "asc"]],
                 "oLanguage": {
                     "sLengthMenu": "每页显示 _MENU_ 条记录",
                     "sZeroRecords": "抱歉， 没有找到",
                     "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                     "sInfoEmpty": "没有数据",
                     "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                     "oPaginate": {
                         "sFirst": "首页",
                         "sPrevious": "前一页",
                         "sNext": "后一页",
                         "sLast": "尾页"
                     },
                 },
                 initComplete: function () {
                 this.api().columns().every( function () {
                     var column = this;
                     var select = $('<select><option value=""></option></select>')
                         .appendTo( $(column.footer()).empty() )
                         .on( 'change', function () {
                             var val = $.fn.dataTable.util.escapeRegex(
                                 $(this).val()
                             );
                             column
                                 .search( val ? '^'+val+'$' : '', true, false )
                                 .draw();
                         } );
                     column.data().unique().sort().each( function ( d, j ) {
                         select.append( '<option value="'+d+'">'+d+'</option>' )
                     } );
                 } );
             }
             });
     
          //   {# 除去空列 #}
         $("#main_datatable tfoot tr td").each(function () {
             var content = $(this);
             var target = $("#main_datatable").DataTable();
     
             if(content.attr("data-column") !== "0" && content.attr("data-column")!== "6" ){
                 var options = content.find("option");
                 if(options.length ===2 && options.eq(1).attr("value")==="" ){
                     console.log(options.eq(1));
                     var column = target.column(content.attr("data-column"));
                     column.visible( ! column.visible() );
                 }
             }
         });
     
         // {#复制下方表格插件的tfoot #}
         var main_table_tfoot = $('#main_datatable tfoot');
         var filter_table = $("#filter_table");
         filter_table.append(main_table_tfoot.clone());
         var main_table_thead = $('#main_datatable thead');
         filter_table.append(main_table_thead.clone());
         $("#filter_table tfoot select").change(function(){
             filterColumn( $(this).parents('td').attr('data-column'),$(this).val());
             });
     
         // {#控制复制后的上方table的tfoot#}
         // {#var filter_controller = [["系统类型",false],["recorder",false]];#}
         var filter_controller = [];
         hideColumn();
         $("#filter_table thead td").each(function () {
             var content = $(this);
             var content_tfoot = $("#filter_table tfoot td");
             $.each(filter_controller,function (index,item) {
                 if(content.text()===item[0]){
                     var td_index = content.index();
                     content.css("display","none");
                     content_tfoot.eq(td_index).css("display","none");
                 }
             })
         });
     
         });
     

   • 效果图