0

我有 6 个数据表,页面上有一个数据表配置,所有五个表的基本布局如下:

 <table>
     <thead>
        <tr>
         <th>COL_1</th>
         <th>COL_2</th>
         <th>COL_1</th>
         <th>COL_1</th>
         <th>COL_1</th>
        </tr>
     </thead>
     <tbody>
         <tr><td></td>
             <td></td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
     </tbody>
 </table>

我的数据表配置选项如下:

     {
         order: [[5, "desc"], [2, "asc"]]
         .......
     }

我的问题是我需要按表按列排序。例如,在表 1 中,我想在第 3 列和第 4 列上为第二个表排序第 1 列和第 4 列,在第 0 列和第 3 列上排序第三列等等,有没有办法在每个数据表没有六个不同配置的情况下做到这一点?

4

1 回答 1

0

您可以在一定程度上参数化 DataTable 初始化代码。

例如,假设以下三个简单的表:

    $('#example1').DataTable( {
        "paging":   true,
        "order": [[5, desc"], [2, "asc"]]
    } );

    $('#example2').DataTable( {
        "paging":   true,
        "order": [[2, "asc"], [3, "asc"]]
    } );

    $('#example3').DataTable( {
        "paging":   true,
        "order": [[4, "asc"], [2, "desc"]]
    } );

表与表之间唯一不同的部分是:

  • 表名
  • 默认排序顺序

我们可以将这些差异提取到一个 JavaScript 对象中,然后对其进行迭代,如下所示:

    var configs = [
        { 
           tableName: 'example1',
           order: [[5, "desc"], [2, "asc"]] 
        },
        { 
           tableName: 'example2',
           order: [[2, "asc"], [3, "asc"]] 
        },
        { 
           tableName: 'example3',
           order: [[4, "asc"], [2, "desc"]] 
        }
      ];

    configs.forEach( function ( config ) {
        console.log(config.tableName);

        $('#' + config.tableName).DataTable( {
            "paging":   true,
            "order": config.order
        } );

    } );

最终结果与三个单独的表定义相同。

当然,您可以向config对象添加更多数据,例如源 URL 等。可能有一些配置项无法以这种方式处理 - 例如,嵌套函数。这取决于您需要表初始化的复杂程度。

在你的情况下,这是一个关于这是否值得做的判断。有可读性的损失,需要考虑。

于 2020-06-06T21:20:08.767 回答