0

我正在使用 jQuery DataTables 插件。我不希望我的 thead 列与 tbody 列对齐，因为我主要使用标题列作为排序按钮。标题名称不再适合，因为我在正文列中显示了额外的信息。

我希望 thead 列靠在一起并在表格顶部左对齐。我希望 tbody 列按照 DataTables 通常的工作方式自动调整大小。完成这种造型的最佳方法是什么？

另外，我觉得我好像在滥用 DataTables 和一般的表格元素。如果您知道我的问题的更简洁的解决方案，它不涉及滚动我自己的 ajax（用于检索表数据）、排序、分页和过滤，请告诉我。

4

1 回答 1

1

请记住，最后，它是一张桌子。表格的结构很难更改，并且标题的宽度将遵循它们所包含的主体的宽度。

你说你正在使用额外的信息进行排序？为什么不使用您想要的任何结构和 css 创建一个容器，然后使用 api 与数据表进行交互？

您可以使用 api 进行排序：

$(document).ready(function() {
  var oTable = $('#example').dataTable();

  // Sort immediately with columns 0 and 1
  oTable.fnSort( [ [0,'asc'], [1,'asc'] ] );
 } );

例如，如果您希望在表格上方有一个用户可以单击的按钮，而不是表格标题本身，您可以这样做：

<div id="separateStyledContainer">
    <button id="sortByColumn2">Sort by Column 2</button>
</div>
<table id="datatable">
    <thead>
        <th>Column 1</th>
        <th>Column 2</th>
    </thead>
    <tbody>
        <tr>
            <td>Column 1 Value 1</td>
            <td>Column 2 Value 1</td>
        </tr>
        <tr>
            <td>Column 1 Value 2</td>
            <td>Column 2 Value 2</td>
        </tr>
    </tbody>              
</table>

这是JS：

$(function() {

  var table = $("#datatable").dataTable();  

    $("#sortByColumn2").on("click", function() {
      table.fnSort([[1,'asc']]);             
    });        

})​

这是一个可以查看的工作 jsFiddle

这样你就不会与桌子对抗。datatable 提供的所有 API 都在这里

于 2012-10-24T04:08:04.743 回答