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

Question

I am attempting to create a Sortable Table (dataTables) with both Fixed Headers (floatThead) and Resizable columns (jquery-resizable-columns) using Bootstrap 3 w/ responsive tables. So far I am able to get it to do two things at once, but not three. That is, either Resizable Columns and Sortable, or Sortable with Fixed Headers, etc. When I go up to three pieces of JS, things stop working.

I've got a little JSFiddle going here: 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();
 });

Any thoughts on what could be causing the conflict here or thoughts on a workaround? I know there are similar questions out there, but none, I believe, that are this specific. I basically need to get as much table function as possible. Any help would be very appreciated.

Answer 1

SOLUTION

Using jQuery DataTables 1.10.9 with Bootstrap styling, FixedHeader and Responsive extensions and unofficial ColResize plug-in you can create responsive, sortable table with Bootstrap styling, fixed headers and resizable columns using the code below:

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
});

Please note that ColResize plug-in doesn't fully support FixedHeader, see this issue on GitHub .

DEMO

See this jsFiddle for code and demonstration.