6

angular-datatables ライブラリhttp://l-lin.github.io/angular-datatables/#/angularWayを使用しようとしていますが、テーブルのスタイルを制御する方法がわかりません。内部の HTML 要素に触れることは可能ですか? 以下の例のように、検索ボックスの横にあるテキストを削除するにはどうすればよいですか? また、API を読みましたが、ボタンの datatables_info を非表示にする方法が見つかりませんでした。

ここに画像の説明を入力

ここに画像の説明を入力

アップデート

CSS で非表示にできるかもしれませんが、input 要素にプレースホルダーを追加することはできないようです。

4

1 に答える 1

11

検索ボックスのテキスト

注入された DOM 要素を操作することによっても、さまざまな方法でこれを行うことができますが、「正しい」方法は言語設定を変更することです。デフォルトの言語オブジェクト リテラルは

var lang = {
    "decimal":        "",
    "emptyTable":     "No data available in table",
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",
    "processing":     "Processing...",
    "search":         "Search:",
    "zeroRecords":    "No matching records found",
    "paginate": {
        "first":      "First",
        "last":       "Last",
        "next":       "Next",
        "previous":   "Previous"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

に変更searchしてオプションとして""含めます:langlanguage

.withOption('language', lang)

下部の datatables_info を非表示にします

iオプションからフラグを省略することで、テーブル情報の要約を完全に無効にすることができdomます。デフォルトdom設定はlfrtipですので、簡単に

.withDOM('lfrtp')

ここで両方のソリューションの動作を確認してください -> http://plnkr.co/edit/3WqPj1IW1h3zK37hF4dv?p=preview

入力要素にプレースホルダーを追加します

挿入された検索ボックスは にあり.dataTables_filter inputます。angular.element()またはを使用document.querySelector()して、そのような DOM 要素を操作できます。検索ボックスにプレースホルダーを追加するには

.withOption('initComplete', function() {
   angular.element('.dataTables_filter input').attr('placeholder', 'Search ...');
})

「前へ」および「次へ」ボタンに ng-bind または ng-click を追加します

これは非常にトリッキーです。挿入された要素は角度とは何の関係もありません-要素に a を追加してから (re)を追加することは何とか可能だと思います。ただし、ページネーション ボタンは、テーブルが再描画されるたびに再作成されるため、角化を何度も行う必要があります。ただし、std angular ディレクティブを使用せずに、前/次のボタンのイベントを簡単に促進できます。ng-click$compile

.withOption('drawCallback', function() {
   angular.element('.paginate_button.previous').on('click', function() { alert('prev')} )
   angular.element('.paginate_button.next').on('click', function() { alert('next')} )             
})

page.dtアクティブなページが変更されたときに発生するイベントもあります。

angular.element('body').on('page.dt', function(e, api) {
   console.log('Page #'+(api._iDisplayStart / api._iDisplayLength + 1) +' shown') ;
})
于 2016-02-02T13:43:27.640 に答える