Proble with the Appearence of DataTable
Proble with the Appearence of DataTable
Hi,
I am new in JQuery.
I am using the DataTable using "bJQueryUI": true.
But the appearance is not like the one given in the Live example in this website.
There is some problem with the header and footer and also with the Paging Numbers and next, previous etc. They r overlaping each other.
And i have only the following two js in my project folder.
jquery.js
jquery.dataTables.js
my code is like bellow :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Page
var aDataSet;
$(document).ready(function() {
aDataSet = [
['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'],
['Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A'],
['Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'],
['Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'],
['Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'],
['Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'],
['Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', 1, 'A'],
['Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', 1.1, 'A'],
['Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', 1.2, 'A'],
['Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', 1.3, 'A'],
['Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', 1.4, 'A'],
['Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', 1.5, 'A'],
['Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', 1.6, 'A']
];
//$('#dynamic').html('');
oTable = $('#example').dataTable({
"aaData": aDataSet,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "CUSTOMER NAME" },
{ "sTitle": "ADDRESS" },
{ "sTitle": "CITY" },
{ "sTitle": "PHONE" },
{ "sTitle": "MISC" }
]
});
});
DataTables with jQuery UI themes example
I am new in JQuery.
I am using the DataTable using "bJQueryUI": true.
But the appearance is not like the one given in the Live example in this website.
There is some problem with the header and footer and also with the Paging Numbers and next, previous etc. They r overlaping each other.
And i have only the following two js in my project folder.
jquery.js
jquery.dataTables.js
my code is like bellow :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Untitled Page
var aDataSet;
$(document).ready(function() {
aDataSet = [
['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'],
['Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Firefox 3.0', 'Win 2k+ / OSX.3+', '1.9', 'A'],
['Gecko', 'Camino 1.0', 'OSX.2+', '1.8', 'A'],
['Gecko', 'Camino 1.5', 'OSX.3+', '1.8', 'A'],
['Gecko', 'Netscape 7.2', 'Win 95+ / Mac OS 8.6-9.2', '1.7', 'A'],
['Gecko', 'Netscape Browser 8', 'Win 98SE+', '1.7', 'A'],
['Gecko', 'Netscape Navigator 9', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Mozilla 1.0', 'Win 95+ / OSX.1+', 1, 'A'],
['Gecko', 'Mozilla 1.1', 'Win 95+ / OSX.1+', 1.1, 'A'],
['Gecko', 'Mozilla 1.2', 'Win 95+ / OSX.1+', 1.2, 'A'],
['Gecko', 'Mozilla 1.3', 'Win 95+ / OSX.1+', 1.3, 'A'],
['Gecko', 'Mozilla 1.4', 'Win 95+ / OSX.1+', 1.4, 'A'],
['Gecko', 'Mozilla 1.5', 'Win 95+ / OSX.1+', 1.5, 'A'],
['Gecko', 'Mozilla 1.6', 'Win 95+ / OSX.1+', 1.6, 'A']
];
//$('#dynamic').html('');
oTable = $('#example').dataTable({
"aaData": aDataSet,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "CUSTOMER NAME" },
{ "sTitle": "ADDRESS" },
{ "sTitle": "CITY" },
{ "sTitle": "PHONE" },
{ "sTitle": "MISC" }
]
});
});
DataTables with jQuery UI themes example
This discussion has been closed.
Replies
Regards Hosain