My first little Datatable, how do I do this?
My first little Datatable, how do I do this?
I'm a newbie at Datatables. I have set up my dynamic table (data is coming from MySql db), with the help of the Datatable Editor. So far so good.
How cat I create modifications from the examples? I just don't get the idea. This is my code of the .js file so far:
[code]
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.dl_project2.php",
"domTable": "#dl_project2",
"fields": [
{
"label": "groep",
"name": "groep",
"type": "text"
}, {
"label": "bestemming",
"name": "bestemming",
"type": "text"
},
{
"label": "van",
"name": "van",
"type": "date",
"dateFormat": 'D, d M y'
},
{
"label": "tot",
"name": "tot",
"type": "date",
"dateFormat": 'D, d M y'
}
]
} );
$('#dl_project2').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/table.dl_project2.php",
"aoColumns": [
{
"mData": "groep"
},
{
"mData": "bestemming"
},
{
"mData": "van"
},
{
"mData": "tot"
}
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );
}(jQuery));
[/code]
Now I want to add a vertical scrollbar. This should be the initialisation code:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"bScrollCollapse": true
} );
} );
[/code]
Do I have to add this code somewhere in the .js file? And do I have to change
$('#example').dataTable( {
to
$('#dl_project2').dataTable.Editor( {
Sorry, this may be a stupid question, but I don't get the idea of how this is working. Thanks in advance.
How cat I create modifications from the examples? I just don't get the idea. This is my code of the .js file so far:
[code]
(function($){
$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/table.dl_project2.php",
"domTable": "#dl_project2",
"fields": [
{
"label": "groep",
"name": "groep",
"type": "text"
}, {
"label": "bestemming",
"name": "bestemming",
"type": "text"
},
{
"label": "van",
"name": "van",
"type": "date",
"dateFormat": 'D, d M y'
},
{
"label": "tot",
"name": "tot",
"type": "date",
"dateFormat": 'D, d M y'
}
]
} );
$('#dl_project2').dataTable( {
"sDom": "Tfrtip",
"sAjaxSource": "php/table.dl_project2.php",
"aoColumns": [
{
"mData": "groep"
},
{
"mData": "bestemming"
},
{
"mData": "van"
},
{
"mData": "tot"
}
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );
}(jQuery));
[/code]
Now I want to add a vertical scrollbar. This should be the initialisation code:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false,
"bScrollCollapse": true
} );
} );
[/code]
Do I have to add this code somewhere in the .js file? And do I have to change
$('#example').dataTable( {
to
$('#dl_project2').dataTable.Editor( {
Sorry, this may be a stupid question, but I don't get the idea of how this is working. Thanks in advance.
This discussion has been closed.
Replies
$('#dl_project2').dataTable( {
section, along with "sDom" etc., assuming your HTML table has the id 'dl_project2'.