disable bPaginate and bLengthChange

iecwebmast

Hello,

I want to use the FixedHeader on some pages to show long tables without length change and pagination.
How can I disable these variables ONLY on pages which call the FixedHeader script? What I would like to do is to either specify this within the FixedHeader.js or call a separate js which disables the bPaginate and bLengthChange. I don't want to disable the bPaginate and bLengthChange in the main datatables.js, since I would like to use the pagination on some other pages.

I am calling in the head:
[code]








[/code]

I tried adding this in the head to disable bPaginate and bLengthChange...

[code]
$(document).ready( function () {
$('#example').dataTable( {
"bLengthChange": false,
"bPaginate": false
} );
} );
[/code]

but it gives me this warning:
[code]
DataTables warning (table id = 'example'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).
[/code]

Can you tell me what I am doing wrong?

Thank you in advance!

iecwebmast

allan

As the error says, you are initialising the DataTable twice. You must have another call to initialise the table somewhere in your code.

Allan

iecwebmast

Hi Allan,

Yes, I am using the script from:
DataTables individual column filtering example (using select menus)
http://www.datatables.net/examples/api/multi_filter_select.html

Which I've called:
/jquery.datatables.autofilter.js

It initializes the table at the end.

How can I avoid the conflict?

Cheers,

iecwebmast

allan

You need to combine the two together so you only have one '$('#example').dataTable( ....'. So you might want to remove one of the ones you currently have and put the options from that into the other one.

Allan

iecwebmast

I tried to do this, but I guess my syntax is not correct.

[code]
$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
$('#example').dataTable( {
"bPaginate": false,
"bLengthChange": false } );
} );
[/code]

Can you tell me what am I doing wrong?
thanks again for your help!!!

iecwebmast

allan

[code]
$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"bPaginate": false,
"bLengthChange": false
} );

/* Add a select menu for each TH element in the table footer */
$("tfoot th").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} );
[/code]
Allan

iecwebmast

Thank you very much for your help!!!
Cheers,
iecwebmast

iecwebmast

Hello again!
I forgot the most important part... the fixed header. Can you tell me where it should be called? I tried this, but the column filtering works to sort, but can not go back to all.

[code]
$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": "Search all columns:"
},
"bPaginate": false,
"bLengthChange": false
} );
/* Add a select menu for each TH element in the table footer */
$("thead td").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
new FixedHeader( oTable );
} );
[/code]

I guess I am still missing something.

Thank again in advance for your help!

iecwebmast

allan

I think the order you want is:

1. DataTables
2. fnCreateSelect
3. FixedHeader
4. Add fnFilter events

Also, you'll almost certainly want live events on the select elements :-)

Allan

iecwebmast

OK... I'm obviously doing something silly. I've tried everything I can think of and... no luck. :-(

iecwebmast

I've looked for examples of how to make live events, but I can't figure out the syntax.

allan

http://api.jquery.com/live/

[code]
$('select', this).change( function () {
[/code]
becomes:

[code]
$('select').live( 'change', function () {
[/code]

You might want to limit the selector more - you might not :-)

Allan

iecwebmast

Thank you very much for your hints. Can you tell me what I need to do with this part?
[code]
oTable.fnFilter( $(this).val(), i );
[/code]

I read the examples in the link you sent. It seems like it should be something like:
[code]
$(this).val() oTable.fnFilter(i);
[/code]

But of course it doesn't work.

allan

Why wouldn't it work as it currently is? It looks right to me on a quick pass. Are you getting script errors?

Allan

iecwebmast

Hi again!

I am still struggling to find a way to use the fixed header AND column filters (with bPaginate and bLengthChange disabled).

The column filters work WITHOUT the fixed header.
http://www.iec.ch/TESTS/datatables/myexample_v1.html
[code]
$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": " Search all columns:"
},
"bPaginate": false,
"bLengthChange": false
} );
/* Add a select menu for each TH element in the table footer */
$("thead td").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
} );
} );
} );
[/code]

When I try to add the fixed header, it sort of works, but with problems. When you select an item in a column filters a "fantom" header appears at the bottom... and... you can not go back to show all items in the column filter.
http://www.iec.ch/TESTS/datatables/myexample_v2.html
[code]
$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": " Search all columns:"
},
"bPaginate": false,
"bLengthChange": false
} );
/* Add a select menu for each TH element in the table footer */
$("thead td").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select', this).change( function(){
oTable.fnFilter( $(this).val(), i );
} );
} );
new FixedHeader( oTable );
} );
[/code]

I also tried to use the "live" method, but I was never successful.
http://www.iec.ch/TESTS/datatables/myexample_v3.html
[code]
$(document).ready(function() {
/* Initialise the DataTable */
var oTable = $('#example').dataTable( {
"oLanguage": {
"sSearch": " Search all columns:"
},
"bPaginate": false,
"bLengthChange": false
} );
/* Add a select menu for each TH element in the table footer */
$("thead td").each( function ( i ) {
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
$('select').live('change', function () {
$(this).val(), oTable.fnFilter(i);
} );
} );
new FixedHeader( oTable );
} );
[/code]

Could you please help me to get the live method to work with fixedheader and column filters?

Thank you again very much for your help!!

iecwebmast

iecwebmast

Hello,
I was wondering if you could help me solve this problem? I've really tried and I can't seem to find the solution.
Thank you in advance for your help...
Cheers,
iecwebmast

iecwebmast

Dear Allan,
Can you help me find a way to combine fixedheader and individual column select filters? I would really appreciate your help on this. I need to show a working example.
Yours sincerely,
iecwebmast

allan

I think your examples v2 and v3 are very close to the solution - however the issue you are facing is that whenever DataTables does a redraw, it causes FixedHeader to reclone the header - thus eliminating the old DOM nodes which have the select on them already, resulting in this situation. So what you need to do is have an fnDrawCallback function which will update the select option in the drop-downs.

Possibly a better solution would be to modify fnCreateSelect() so that it will add a selected="selected" attribute to the OPTION which should be selected for the row (I'd say this was a cleaner solution). So the only tricky bit I think is getting the value of the filter for each column. That can be got from fnSettings().aoPreSearchCols[i].sSearch - where i is the column index.

Allan

iecwebmast

Dear Allan,
I've search for some examples of how to implement the solutions you mentioned... but I haven't found. Could you please tell me how to go about it? I really very much appreciate your help!!!
Yours sincerely,
iecwebmast

allan

Hi iecwebmast,

I wouldn't work with the live method for the moment, as I thought that path will be a bit bumpy (for instance at the moment you are applying your 'change' event to elements a number of times, since there is no context switch - and even if there were, it wouldn't help since the select elements in the 'true' header aren't the ones in the floating header!

So... what I would suggest is using fnDrawCallback to set the values of the select menus in the floating layer whenever the table is drawn based on the aoPreSearchCols[i].sSearch parameter for each column. To do this you'll need to loop over the elements used for each column and use the $('select', ctx).val( ... ) method.

The one tricky bit might be that setting the value like that will actually fire a 'change' event - thus giving a never ending loop. So I think you would need a flag in the draw function which would be set and stop the filter from being applied at that time.

Allan