jQuery DataTable 默认排序

简介

jQuery DataTable是一款强大的表格插件，可以对表格进行排序、过滤、分页等常见操作。本文将介绍如何设置默认排序，以及一些常见问题的解决方案。

设置默认排序

默认情况下，DataTable并不会自动进行排序，需要手动设置。可以通过order选项来设置默认排序方式。

$(document).ready(function() {
  $('#example').dataTable( {
    "order": [[ 1, "asc" ]]
  } );
} );

上述代码将按照第二列（索引为1）升序排列。如果要降序排列，只需将"asc"改为"desc"即可。

$(document).ready(function() {
  $('#example').dataTable( {
    "order": [[ 1, "desc" ]]
  } );
} );

也可以同时指定多个排序条件，例如按照第一列降序排列，再按照第二列升序排列。

$(document).ready(function() {
  $('#example').dataTable( {
    "order": [[ 0, "desc" ], [ 1, "asc" ]]
  } );
} );

处理复杂数据

当表格中包含日期、时间等复杂数据类型时，需要使用插件扩展库。例如，使用DataTables DateTime插件处理日期。

<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>

然后在order选项中指定数据类型为"datetime-moment"。

$(document).ready(function() {
  $('#example').dataTable( {
    "columnDefs": [
      { type: 'datetime-moment', targets: 0 }
    ],
    "order": [[ 0, "desc" ]]
  } );
} );

使用插件

DataTable有很多插件可以扩展功能，例如增加搜索框、添加自定义按钮等。官方提供了插件库，也可以通过第三方库使用。以下是一个使用Buttons插件的示例代码：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>

<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>
    <!-- more data... -->
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
      'csvHtml5'
    ]
  } );
} );
</script>

上述代码在表格上方添加了一个导出CSV格式的按钮。插件库提供了很多有用的插件，可以根据需求选择使用。

结论

本文介绍了如何设置jQuery DataTable的默认排序方式，并且处理了复杂数据类型和使用插件的方法。DataTable是一款非常强大的表格插件，学会使用它可以大大提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13993