Datatables行分組 - 如何展開以顯示搜索匹配並添加重置搜索字段按鈕

我正在使用Datatables Collapsible/Expandable Grouping。Datatables行分組 - 如何展開以顯示搜索匹配並添加重置搜索字段按鈕

我已經對其進行了配置，以便所有組在最初的視圖中摺疊。感謝ThulasiRam的幫助，我整合了groupcount rowcount和摺疊/展開所有功能。 Datatables row grouping - how to add rowcount per group and expand/collapse all

我想將表搜索配置爲自動擴展匹配搜索的行而不是唯一匹配的組。

我也想添加一個重置按鈕到表搜索。我已經設法添加了「X」按鈕，但我還沒有找到正確設置點擊功能的方式，以便它重置表搜索字段。

我已經建立了一個的jsfiddle顯示什麼，我試圖完成：http://jsfiddle.net/lbriquet/SBdJd/9/

任何幫助真的會感謝！

來源

2012-06-08 lbriquet

好吧，我知道了原來你使用的私有函數不是公共的，看here

的另一個問題是，你需要一個參考保持你的數據表使用其功能。繼承人answer

來源

2012-06-08 13:02:42 AbstractChaos

非常感謝您對搜索框重置按鈕的幫助！它工作正常......除了按下重置按鈕時Expand/Collapse all按鈕上的文本也被清除。 – lbriquet

這是由於過濾器清除它現在我看它 – AbstractChaos

嘗試[this]（http://jsfiddle.net/SBdJd/14/） – AbstractChaos

我愛崩潰所有和擴大所有按鈕的作品太棒了！

我不得不稍作修改，以支持最新版本的jQuery

var source = j$('div[id=myTable_filter]')[0]; 
var source2 = j$('div[id=myTable_filter]')[0].firstChild; 
var divToadd = j$('<div>', {'id': 'dtsearch_filter'}) 
j$(source2).wrapAll(divToadd); 
var htmlToadd = j$('<input />', {'type': 'button','class': 'expandedOrCollapsedGroup collapsed', 'value': 'Expand All' }) 
j$(htmlToadd).prependTo(source); 

j$('.expandedOrCollapsedGroup').click(function() { 
if (j$(this).hasClass('collapsed')) { 
j$(this).addClass('expanded').removeClass('collapsed').val('Collapse All').parents('.dataTables_wrapper').find('.collapsed-group').trigger('click'); 
} 
else { 
j$(this).addClass('collapsed').removeClass('expanded').val('Collapse All').parents('.dataTables_wrapper').find('.expanded-group').trigger('click');  
} 
});

加上這些樣式設置 .expandedOrCollapsedGroup { 寬度：125px; float：left; } .dataTables_filter {float}：none; } .dtsearch_filter { float：right; }

來源

2013-08-21 12:50:17 ktg

Datatables行分組 - 如何展開以顯示搜索匹配並添加重置搜索字段按鈕

回答

相關問題