I can't get anything in $(document).ready to work
I can't get anything in $(document).ready to work
I'm obviously missing something basic but I can' get anything I put in $(document).ready to work.
The table displays OK but no exel, pdf, etc buttons are display and 'no of records' per page not changed.
What am I doing wrong. This is my first day of DataTables so be kind.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
DataTables example
$(document).ready( function () {
$('#example').dataTable( {
oTable.fnLengthChange( 5 );
"sDom": 'T<"clear">lfrtip'} );
} );
ID
Actions
Company
Surname
Name
Email
12233
Unilever SA PC Pty Ltd
Hooper
Clair
clair.hooper@unilever.com
..... Lots more rows
The table displays OK but no exel, pdf, etc buttons are display and 'no of records' per page not changed.
What am I doing wrong. This is my first day of DataTables so be kind.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
DataTables example
$(document).ready( function () {
$('#example').dataTable( {
oTable.fnLengthChange( 5 );
"sDom": 'T<"clear">lfrtip'} );
} );
ID
Actions
Company
Surname
Name
12233
Unilever SA PC Pty Ltd
Hooper
Clair
clair.hooper@unilever.com
..... Lots more rows
This discussion has been closed.
Replies
> "sDom": 'T<"clear">lfrtip'
The 'T' is TableTools, but you haven't included the TableTools script. I'd be surprised if you aren't getting a Javascript error on the browser's console.
Allan
[code]
$('#example').dataTable( {
oTable.fnLengthChange( 5 );
"sDom": 'T<"clear">lfrtip'} );
} );
[/code]
is never going to work, try
[code]
var oTable = $("#example).dataTable({
"sDom": 'T<"clear">lfrtip'
});
oTable.fnLengthChange(5);
[/code]
Also, what Allan said. You do need to include the TableTools library if you want to use TableTools.
What aspect did you find confusing? How can it be improved? I'm currently working on revamping the documentation, so I'd like to try and address as many issues as possible!
Allan
I don't feel that it progresses in a logical fashion. ie Start with basic, now add this function, then next. All your examples show code as if the particular function in question was all one wished to do. Not how they interact with each other. I like many others it would seem battled with the sDom, it is bit too criptic in my view, but enlightenment comes to those who persevere.
Perhaps you should have one tut that builds a page bit by bit to the extent that the basic concepts become clear.
That being said with a bit of sweat and swearing one does start to get the hang of it. I have only been trying this since Friday and my biggest problem has been the conflicts I seem to get between DataTables and Bootstrap. I never know if I have made a mistake or a conflict exists without hacking code.
Allan
I solved the problem of the 'too short edit popup'. I load my form into an iframe and it's height was too short. As soon as I increased it it to 1000 all was OK. The reason I had it shorter was to position my copyright message. I will move that and make it fixed position
I have been unable to get Edit buttons and the Print, PDF buttons to both appear on a page so I defined the buttons I want myself. Is there a way to get a spacer between the Delete and Copy buttons so that they appear grouped?
"oTableTools": {
"sSwfPath": "../swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor },
*** want spacer here
"copy",
"print",
"csv",
"xls",
"pdf",
]
},
Regards Roger
I now have a new issue. I am trying to create an edit form from a table. I get the edit, etc buttons, get the Edit form with data but it is too short (it only shows my first field, have to scroll to see the others). Somewhere maxHeight for DTC_Body_Content is being set to 48px. If I disable this in Firebug all is ok. Form correct length. Max height is not set in any css but is set in dataTables.editor. I have checked all my versions and they seem OK.
I include the header only as the body has not changed.
As you will see I have disabled all the bootstrap stuff to be on the safe side but as an aside I am still getting conflicts eg. "sPaginationType": "full_numbers", works fine without Bootstrap but not with Boostrap (shows text only, no buttons). "sPaginationType": "bootstrap", works with Bootstrap included but I dont like it. I prefer your rendition.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
DataTables example
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
<!---->
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "php/formOnlyData.php",
"domTable": "#example",
"fields": [ {
"label": "ID:",
"name": 0
}, {
"label": "Actions:",
"name": 1
}, {
"label": "Company:",
"name": 2
}, {
"label": "Surname:",
"name": 3
}, {
"label": "Name:",
"name": 4
}, {
"label": "Emil:",
"name": 5,
}
]
} );
$('#example').dataTable( {
//"sDom": "<'row-fluid'<'span6'Tl><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "full_numbers",
"sDom": "Tfrtip",
//"sAjaxSource": "php/formOnlyData.php",
//"aoColumns": [
// { "mDataProp": "id" },
// { "mDataProp": "actions" },
// { "mDataProp": "surname" },
// { "mDataProp": "name" },
// { "mDataProp": "email" }
//],
"oTableTools": {
//"sSwfPath": "../swf/copy_csv_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
} );
} );