sever-side proc., mutiple datatables on 1 html page, how do I make each datatable have diff color bg
sever-side proc., mutiple datatables on 1 html page, how do I make each datatable have diff color bg
david_lyon
Posts: 8Questions: 0Answers: 0
I am using this code http://datatables.net/release-datatables/examples/data_sources/server_side.html to generate a multiple tables on 1 html page and its working nicely.
I have several datatables on 1 html page, each datatable is calling a different server_processing.php script.
How do I make each the datatable have a different background color so its easy on the eyes when scrolling down the page and viewing more than 1 datatables???
My html code is below, can someone show me explicitly what to change???
Thank you very much in advance
David
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "http://XXXXXXXX/DataTables-1.9.4/media/css/demo_page.css";
@import "http://XXXXXXXX/DataTables-1.9.4/media/css/demo_table.css";
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./server_processing.php",
"iDisplayLength": 5,
"aoColumnDefs": [
{
"aTargets": [ 7 ], // Column to target
"mRender": function ( data, type, full ) {
// 'full' is the row's data object, and 'data' is this column's data
// e.g. 'full[0]' is the comic id, and 'data' is the comic title
return '' + data + '';
}
}
]
} );
} );
$(document).ready(function() {
$('#example2').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./server_processing2.php",
"iDisplayLength": 5,
"aoColumnDefs": [
{
"aTargets": [ 7 ], // Column to target
"mRender": function ( data, type, full ) {
// 'full' is the row's data object, and 'data' is this column's data
// e.g. 'full[0]' is the comic id, and 'data' is the comic title
return '' + data + '';
}
}
]
} );
} );
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
Flow Gating DataTables
Preamble
??????Database
B2 Tube
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
Loading data from server
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
DC Tube
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
Loading data from server
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-365466-5");
pageTracker._trackPageview();
} catch(err) {}
I have several datatables on 1 html page, each datatable is calling a different server_processing.php script.
How do I make each the datatable have a different background color so its easy on the eyes when scrolling down the page and viewing more than 1 datatables???
My html code is below, can someone show me explicitly what to change???
Thank you very much in advance
David
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "http://XXXXXXXX/DataTables-1.9.4/media/css/demo_page.css";
@import "http://XXXXXXXX/DataTables-1.9.4/media/css/demo_table.css";
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./server_processing.php",
"iDisplayLength": 5,
"aoColumnDefs": [
{
"aTargets": [ 7 ], // Column to target
"mRender": function ( data, type, full ) {
// 'full' is the row's data object, and 'data' is this column's data
// e.g. 'full[0]' is the comic id, and 'data' is the comic title
return '' + data + '';
}
}
]
} );
} );
$(document).ready(function() {
$('#example2').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./server_processing2.php",
"iDisplayLength": 5,
"aoColumnDefs": [
{
"aTargets": [ 7 ], // Column to target
"mRender": function ( data, type, full ) {
// 'full' is the row's data object, and 'data' is this column's data
// e.g. 'full[0]' is the comic id, and 'data' is the comic title
return '' + data + '';
}
}
]
} );
} );
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = '//s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
Flow Gating DataTables
Preamble
??????Database
B2 Tube
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
Loading data from server
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
DC Tube
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
Loading data from server
Tube
Subject
Timepoint
Age
Gender
Ethnicity
Population id
Counts
Annotation
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-365466-5");
pageTracker._trackPageview();
} catch(err) {}
This discussion has been closed.
Replies
Thanks