如何自定義角度數據表的樣式

我是新來的角度，試圖使用角度數據表庫http://l-lin.github.io/angular-datatables/#/angularWay，但不知道如何控制表的樣式，因爲他們都是角度指令，是它可能我可以觸摸HTML元素裏面？就像下面的例子一樣，我如何刪除搜索框旁邊的文本？我也讀過API，找不到如何在buttom上隱藏datatables_info。如何自定義角度數據表的樣式

更新

也許我可以通過CSS隱藏起來，但似乎是不可能的佔位符添加到輸入元素

來源

2016-02-02 vincentf

搜索框文字

您可以通過各種方式來完成此操作，也可以通過操作注入的DOM元素來完成 - 但「正確」的方法是更改language設置。默認語言對象字面是

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到""，包括lang爲language選項：

.withOption('language', lang)

隱藏在底部

您可以禁用datatables_info表格信息通過省略dom選項中的i標誌完全摘要。默認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綁定或NG點擊。注入的元素與角度無關 - 我相信它是以某種方式可能將ng-click添加到元素，然後（重新）$compile。但是，每次重繪表格時都會重新創建分頁按鈕，所以angularification「需要一遍又一遍地發生。但是你可以很容易地方便了上/下一個按鈕事件，而性病的角度指令：

.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-02 13:43:27 davidkonrad

非常感謝！ – vincentf

我可以問另外一個問題，我應該如何操縱注入的DOM元素，例如，如果我想在'previous'和'next'按鈕上添加ng-bind或ng-click – vincentf

這對我來說真的很有用， m試圖用這種方式在表內添加一個元素'angular.element（'。previous'）。after（' test'）;'它正在工作，但是當切換到另一個表頁時，添加的元素消失。我可以問問是什麼原因，我該如何解決？ – vincentf

如何自定義角度數據表的樣式

回答

相關問題