Question

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

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

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

Answer 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']]);             
    });        

})

Here's a working jsFiddle to check out

这样你就不会对抗桌子了。数据表可用的所有API都是here

使用jQuery DataTables对thead和tbody进行不同的对齐

1 个答案: