javascript - 创建具有固定标题和可调整大小的列的响应式，可排序的Bootstrap表

我正在尝试使用带有响应表的Bootstrap 3创建同时具有固定标题(floatThead)和可调整大小的列(jquery-resizable-columns)的可排序表(dataTables)。到目前为止，我能够一次完成两件事，但不能完成三件事。也就是说，无论是可调整大小的列和可排序的，还是具有固定标题的可排序的，等等。当我使用三张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();
 });

对什么可能导致此处发生冲突的想法或对解决方法的想法？我知道那里也有类似的问题，但是我相信没有一个是具体的。我基本上需要获得尽可能多的表函数。任何帮助将不胜感激。

最佳答案

使用具有Bootstrap样式，FixedHeader和响应式扩展以及非官方ColResize plug-in的jQuery DataTables 1.10.9，您可以使用以下代码创建具有Bootstrap样式，固定 header 和可调整大小的列的响应式可排序表:

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 plug-in不完全支持FixedHeader，请参阅this issue on GitHub。



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

关于javascript - 创建具有固定标题和可调整大小的列的响应式，可排序的Bootstrap表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23163449/