multiple features in one table - combing scripts

BenTen

Dear all,

I would like to have a table which uses:

1 Multi-column sorting (http://datatables.net/release-datatables/examples/basic_init/multi_col_sort.html)
2 Change language information (internationalisation) (http://datatables.net/release-datatables/examples/basic_init/language.html)
3 Highlights (http://datatables.net/release-datatables/examples/advanced_init/highlight.html)
4 Tabs (http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html)
5 Using external data http://datatables.net/release-datatables/examples/ajax/custom_data_property.html


The problem is: How do I combine these scripts and make the table work?

Scripts:

1

/* Define two custom functions (asc and desc) for string sorting */
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

$(document).ready(function() {
/* Build the DataTable with third column using our custom sort functions */
$('#example').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"aoColumnDefs": [
{ "sType": 'string-case', "aTargets": [ 2 ] }
]
} );
} );


============================================
2


$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "Display _MENU_ records per page",
"sZeroRecords": "Nothing found - sorry",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
}
} );
} );


=============================================
3

$(document).ready(function() {
$('#example').dataTable();
} );


=============================================
4

$(document).ready(function() {
$("#tabs").tabs( {
"show": function(event, ui) {
var table = $.fn.dataTable.fnTables(true);
if ( table.length > 0 ) {
$(table).dataTable().fnAdjustColumnSizing();
}
}
} );

$('table.display').dataTable( {
"sScrollY": "200px",
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
"aoColumnDefs": [
{ "sWidth": "10%", "aTargets": [ -1 ] }
]
} );
} );


===============================================
5

$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/custom_prop.txt",
"sAjaxDataProp": "demo"
} );
} );






=================================================

Thanks for helping out!

Beste regards,

Ben

allan

The basic principle is that you pass the options you want into the object given in the DataTables constructor. So for example, lets say you want a paging length of 50 ( iDisplayLength : 50 ) and no filtering ( bFilter : false ) - individually:

[code]
$('#myTable1').dataTable( {
"iDisplayLength": 50
} );
[/code]

[code]
$('#myTable2').dataTable( {
"bFilter": false
} );
[/code]

To put them together, these are just object properties, so you put them into the same object:

[code]
$('#myTable3').dataTable( {
"iDisplayLength": 50,
"bFilter": false
} );
[/code]

And that's how you build the examples up into exactly what you want :-)

Allan

BenTen

Nice! Thanks a lot!