创建具有固定标头和可调整大小列的响应性、可排序的引导表

Question

我试图使用引导带3w/响应表创建一个可排序表(dataTables)，其中包含固定的标头(floatThead)和可调整大小的列(jquery- Resizable -列)。到目前为止，我可以让它同时做两件事，但不是三件。也就是说，无论是可调整大小的列和可排序的列，还是具有固定的标头的可排序的，等等。当我达到三条JS时，事情就停止工作了。

我有个小JSFiddle在这里：http://jsfiddle.net/cpJE2/2/

$(function(){
     $("table").resizableColumns();
     $('#example').dataTable({
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bSort": true,
        "bInfo": false,
        "bAutoWidth": false
        });
     $("table.table").floatThead();
 });

有什么想法可以引起这里的冲突或想法的解决办法吗？我知道有类似的问题，但我相信没有一个问题是具体的。我基本上需要得到尽可能多的表函数。任何帮助都将不胜感激。

Answer 1

溶液

使用jQuery DataTables 1.10.9的引导样式、FixedHeader和响应扩展以及非官方的ColResize插件，您可以使用以下代码创建响应性的、可排序的引导带样式、固定标头和可调整大小的列：

var table = $('#example').DataTable({
   dom:
      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
      "<'row'<'col-sm-12'Ztr>>" +
      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
   fixedHeader: true,
   responsive: true
});

请注意，ColResize插件并不完全支持FixedHeader，请参见GitHub上的这个问题。

演示

有关代码和演示，请参见这个jsFiddle。