0

jQuery DataTables プラグインを使用しています。主にヘッダー列を並べ替えボタンとして使用しているため、thead 列を tbody 列と並べたくありません。本文の列に追加情報を表示しているため、ヘッダー名が適切ではなくなりました。

テアドの列を近づけて、表の上部に揃えて配置したいと思います。DataTables が通常動作するように、tbody 列のサイズを自動調整したいと考えています。このスタイリングを実現する最善の方法は何ですか?

また、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 に答える