Trying to use datatable plugin to generate a sample table with 4 columns, multi sortable and having
Trying to use datatable plugin to generate a sample table with 4 columns, multi sortable and having
A] Config:
Using datatable plugin to generate a table with 4 columns. Initially, want the columns to be multi column sortable.
B] Issues:
1] The table is not displayed like the tables shown in the examples on datatables.
2] The sorting functionality is not working. I cannot click on up and down buttons
3] There is no search button or drop down selection to show X items on the page.
C] Folder structure
1] src
Index.html
1.1] media
1.1.1] images
1.1.1.1] back_disabled.jpg
1.1.1.2] back_enabled.jpg
1.1.1.3] forward_disabled.jpg
1.1.1.4] forward_enabled.jpg
1.1.1.5]sort_asc.png
1.1.1.6]sort_both.png
1.1.1.7]sort_desc_disabled.png
1.1.1.8]sort_desc.png
1.1.2] js
1.1.2.1] jquery.dataTables.js
1.1.2.2] jquery.js
1.1.3] css
1.1.3.1] demo_page.css
1.1.3.2] demo_table_jui.css
1.1.3.3] demo_table.css
1.1.3.4] jquery-ui.css
1.1.3.5] jquery-ui-1.7.2.custom.css
D] HTML excerpt:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- including google jquery library -->
welcome
<!-- including the stylesheet for the datatable -->
@import "/media/stylesheets/demo_table.css";
<!-- including the jquery javascript library -->
<!-- including the script to display the data-table containg site status data reported by users -->
<!-- script snippet to setup the properties of the datatable(table which will contain site status reported by the users) -->
/* 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 */
// #user_reported_data_table is the name of the table which is used to display the data reported by the users
$('#user_reported_data_table').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"aoColumns": [
null,
null,
{ "sType": 'string-case' },
null,
null
]
} );
} );
<!-- printing the datatable containing the data reported by the users -->
Country
City
Status
Reported at
United Status
Boston
Up
5 minutes back
United Status
Chicago
Up
10 minutes back
United Status
New York
Up
15 minutes back
United Status
Denver
Up
20 minutes back
Using datatable plugin to generate a table with 4 columns. Initially, want the columns to be multi column sortable.
B] Issues:
1] The table is not displayed like the tables shown in the examples on datatables.
2] The sorting functionality is not working. I cannot click on up and down buttons
3] There is no search button or drop down selection to show X items on the page.
C] Folder structure
1] src
Index.html
1.1] media
1.1.1] images
1.1.1.1] back_disabled.jpg
1.1.1.2] back_enabled.jpg
1.1.1.3] forward_disabled.jpg
1.1.1.4] forward_enabled.jpg
1.1.1.5]sort_asc.png
1.1.1.6]sort_both.png
1.1.1.7]sort_desc_disabled.png
1.1.1.8]sort_desc.png
1.1.2] js
1.1.2.1] jquery.dataTables.js
1.1.2.2] jquery.js
1.1.3] css
1.1.3.1] demo_page.css
1.1.3.2] demo_table_jui.css
1.1.3.3] demo_table.css
1.1.3.4] jquery-ui.css
1.1.3.5] jquery-ui-1.7.2.custom.css
D] HTML excerpt:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- including google jquery library -->
welcome
<!-- including the stylesheet for the datatable -->
@import "/media/stylesheets/demo_table.css";
<!-- including the jquery javascript library -->
<!-- including the script to display the data-table containg site status data reported by users -->
<!-- script snippet to setup the properties of the datatable(table which will contain site status reported by the users) -->
/* 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 */
// #user_reported_data_table is the name of the table which is used to display the data reported by the users
$('#user_reported_data_table').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"aoColumns": [
null,
null,
{ "sType": 'string-case' },
null,
null
]
} );
} );
<!-- printing the datatable containing the data reported by the users -->
Country
City
Status
Reported at
United Status
Boston
Up
5 minutes back
United Status
Chicago
Up
10 minutes back
United Status
New York
Up
15 minutes back
United Status
Denver
Up
20 minutes back
This discussion has been closed.
Replies
Allan
1] The number of columns in the table need to match with the number of columns in the aoColumns
2] Firebug is to be used for debugging javascript problems
The moment this project makes money, i am going to donate 50$ to you !!
Thanks much.
Regards,
Allan