How to fix first header row and first column in Jquery datatables

Question

I have been working with Jquery datatables. The open source is very strong and helpful for developers.

My situation is that how to fix the first column and the first header rows of datatables

I've just been searching in http://legacy.datatables.net/extras/fixedcolumns/ and already found the sample I need, however I don't know how to plug it into the HTML datatables opensource projects which contains in the link below

http://datatables.net/download/packages

Anyone who know the integration, please support me.

Answer 1

SOLUTION

You're looking at the example of old version of jQuery DataTables. The URL for new FixedColumns extension is http://datatables.net/extensions/fixedcolumns/.

Use Download Builder and select jQuery, FixedColumns and FixedHeader in addition to already selected elements.

Use the following code to initialize the table:

var table = $('#example').DataTable({
   scrollY: 300,
   scrollX: true,
   scrollCollapse: true,
   paging: false,        
   fixedColumns: true,
   fixedHeader: true
});

DEMO

See this jsFiddle for code and demonstration.