@markjo: It looks like you've solved it from that link and I've added a comment as well. Please don't cross post the same question. It just takes up time so I have less time to answer questions :-)
Hello Allan i'm kind of a newbie to web programming and I have a question concerning the implementation of your data table to my bootstrap web app. Currently I am using bootstrap's table and have this format:
Are you not getting a number of PHP errors from that script? There is no each and a number of quoting syntax errors. Having said that, this is not a PHP forum so you might be better off asking somewhere that is. Basically the thing to do is to get your script outputting an HTML table first and then add DataTables.
I have a couple of problems using DataTable + Twitter Bootstrap when putting it not just inside but inside of a little bit more complex layout:
[code]
....
...
[/code]
First problem is that with this layout "records per page" controls are placed at the top of the grid: http://sdrv.ms/MtfWTc
Second problem is when plugin is initialized with such code:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": "<'row'<'span9'l><'span9'f>r>t<'row'<'span9'i><'span9'p>>",
"bInfo": false,
"sScrollX": "100%",
"sScrollY": "500px",
"sPaginationType": "bootstrap",
"bPaginate": false,
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
} );
[/code]
then some space appears between table header and a body: http://sdrv.ms/LDlOIv And it's enough sScrollX or sScrollY to be in the initialization to have this issue.
I'm using css and js files downloaded from the example of DataTable and Twitter Bootstrap provided by you. Full page layout is here: http://sdrv.ms/LDm0Y5
Thanks.
P.S.: I'm completely new to web development so maybe I'm doing something wrong...
Worked great to paginate and filter 100s of records in my table. Awesome Work !! This is exactly what I was looking for in my Twitter Bootstrap based web application.
So, I hit across one issue on integrating datatables with my bootstrap based application. My table data uses other bootstrap javascript plugins like popovers (http://twitter.github.com/bootstrap/javascript.html) and iphone style checkboxes (http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html).
The issue and probably a blocker for me is, on applying the pagination, the first page loads all this JS plugins properly, however all these JS plugins gets disabled on all the subsequent pages.
Would really appreciate your help and would a big win if you can suggest a way to make datatables working end to end with other JS plugins in all the pages.
This is covered in the top FAQ: http://datatables.net/faqs#events :-). Basically you need to either initialise the other plug-ins first, or have them use live or delegate event handlers (this latter option is the best - but it might mean changing the code of the plug-ins).
Super!! Worked like a breeze, including third-party plugins. I went for the preinitialization approach for now. Thanks a bunch for your quick response and help. This is awesome!!
Okay so I found your demo to be fantastic and exactly what I was looking for. However I admit it I'm better at back end scripting then front end layout / design however I'm trying to learn. I'm experimenting with bootstrap 2.0 for my front end layout and I'm having trouble integrating your demo into it.
I'm using your updated code but when I put it into my default template it doesn't show the table sort options or the pagination or the search box to filter. I'm sure the is a confict with something in your code not working with something in my own (which I admit is just the default templates hacked together by me).
I put the two pages side by side in this demo:
http://whitefeatherphoto.com/demo/demo.cfm
That page is just your code but hosted on my site (yes I know I'm linking to your resources but that is just for this demo period till I figure out what is wrong. Once this get's figured out I'll copy the files to my own host).
Then I take your code and put it in my page template and again the table shows up fine but all the extra options stop working.
Any help you can offer about what I'm doing wrong would be appreciated.
If you look at the console in your browser you will see:
> TypeError: 'undefined' is not a function (evaluating '$('#example').dataTable')
Simple reason is that you are loading jQuery twice:
[code]
[/code]
and the second one overwrites the first.
Btw - I wouldn't use DataTables.net as a CDN like that. It is not designed to be and the path names could change in future. DataTables is available on the Microsoft Ajax CDN which is an excellent CDN network: http://datatables.net/blog/Microsoft_CDN .
I thought that might have been the case but I tried by taking our the jquery.js from your code not from my own. I figured that it was the same but something in yours seems to be necessary where as something in mine seems to be missing.
As for the CDN I was just going to host on my own site rather then external links form another site. I just left the code as it was to help you spot yours versus mine.
You need to load the files in sequence - DataTables depends on jQuery, so you need to load jQuery before DataTables. One option would just be to load DataTables at the end of your document.
Thanks for clarifying that. This is what happens when I stare at code too long. I will remember that next time and now I think you also fixed another problem I had with a different jquery product I was trying to integrate.
For a project, I need to use bootstrap and datatables but I meet problems :
- there is a conflict between the jquery of bootstrap and the jquery of datatables : the display of "aButtons" does not.
- when I remove jquery of bootstrap, the display of "aButtons" does but saving the table is impossible.
Hello
Thanks for the great plugin. It's the best one out there!
I used a previous version of datatables.. before I started into twitter bootstrap. I followed the instructions and have the tables sorting and even have all the sort_buttons working. But I also had a nice little feature to not sort selected columns and hide the sort image.
eg.
[code]
var dontSort = [];
$('#myTable thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
});
$('#myTable').dataTable({
"aoColumns": dontSort,
"sPaginationType": "full_numbers"
});
[/code]
Now this does not work and I get the following error.
DataTables warning (table id = 'myTable'); Cannot reinitialize DataTable.
To retrieve the DataTables objst for this table, pass no arguments or see the docs for bRetrieve and bDestroy.
While it is not really important I thought it was nice to hide the sort images and not sort certain columns. Can you think of an easy way to fix this?
Unfortunately the bSortable parameter cannot be changed dynamically after a DataTable has been initialised. You either need to destroy and the recreate the table ( bDestroy ) which is a fairly expensive process, or you need to add this feature to DataTables / work through the private "api" to manipulate the table into doing what you need.
Tied things into MVC3 with bootstrap. Had to refernce the datatable js from my partial view to get it to fire, but after that works great. Do have an odd styling issue. The top and bottom left (number of rows and page of page text are lefted outside of the containing space. Things come out as a div, then a table, then a div and the div go about 30 px to the left outside of the containing space.
EDIT: never mind, got it. overwrote the bootstrap css for the .row inside my container to have no left margin.
Great stuff!!!
I notice DataTables use jQuery's ID selector:
[code]$('#example').dataTable( ... );[/code]
Why is this preferable to using jQuery's class selector:
[code]$('.DataTable').dataTable( ... );[/code]
?
@jhfrench - Not sure how your question relates to the rest of this thread, but DataTables will work just fine with either selector. I use whichever is appropriate for the situation. For example this multiple tables example uses a class selector: http://datatables.net/release-datatables/examples/basic_init/multiple_tables.html .
I'm using Twitter bootstrap, and i need to change the Search Control or Filter to the input-prend class and with another controls inside like a 'span' and 'i'. I made some changes on source code but i want to know if there is another way to do it with extensions or something.
I changed in function _fnFeatureHtmlFilter
after line [code]var oPreviousSearch = oSettings.oPreviousSearch;[/code]
and before line [code]var nFilter = document.createElement('div');[/code]
the following code:
[code]
var searchControl = '';
var sSearchStr = oSettings.oLanguage.sSearch;
if (oSettings.sPaginationType == "bootstrap") {
var bootstrapSearchControl = '';
searchControl = bootstrapSearchControl;
sSearchStr = "";
}
> Also do I have to install Data tables or is it part of the Twitter bootstrap?
DataTables is a jQuery plug-in for adding interaction controls to HTML tables. It is not part of Twitter Bootstrap - you need to install DataTables. See: http://datatables.net/blog/Getting_started_with_DataTables%3A_First_steps
Replies
Allan
Thank you for interest.
mysql_fetch_row
while($row)
{
$id=$row[0];
$name=$row[1];
phonenumber=$row[2];
'
id
name
phone number
'.$id.'
'.$name.'
'.$phonenumber.'
}
but when I implement your scripts it gives me some errors and doesn't work (obviously im pulling a very silly mistake) .
Thank you,
Sevag
Allan
I have a couple of problems using DataTable + Twitter Bootstrap when putting it not just inside but inside of a little bit more complex layout:
[code]
....
...
[/code]
First problem is that with this layout "records per page" controls are placed at the top of the grid: http://sdrv.ms/MtfWTc
Second problem is when plugin is initialized with such code:
[code]
$(document).ready(function() {
$('#example').dataTable( {
"sDom": "<'row'<'span9'l><'span9'f>r>t<'row'<'span9'i><'span9'p>>",
"bInfo": false,
"sScrollX": "100%",
"sScrollY": "500px",
"sPaginationType": "bootstrap",
"bPaginate": false,
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
}
} );
} );
[/code]
then some space appears between table header and a body: http://sdrv.ms/LDlOIv And it's enough sScrollX or sScrollY to be in the initialization to have this issue.
I'm using css and js files downloaded from the example of DataTable and Twitter Bootstrap provided by you. Full page layout is here: http://sdrv.ms/LDm0Y5
Thanks.
P.S.: I'm completely new to web development so maybe I'm doing something wrong...
Worked great to paginate and filter 100s of records in my table. Awesome Work !! This is exactly what I was looking for in my Twitter Bootstrap based web application.
Thanks!
Allan
So, I hit across one issue on integrating datatables with my bootstrap based application. My table data uses other bootstrap javascript plugins like popovers (http://twitter.github.com/bootstrap/javascript.html) and iphone style checkboxes (http://awardwinningfjords.com/2009/06/16/iphone-style-checkboxes.html).
The issue and probably a blocker for me is, on applying the pagination, the first page loads all this JS plugins properly, however all these JS plugins gets disabled on all the subsequent pages.
Would really appreciate your help and would a big win if you can suggest a way to make datatables working end to end with other JS plugins in all the pages.
Thanks!
-Hiten
This is covered in the top FAQ: http://datatables.net/faqs#events :-). Basically you need to either initialise the other plug-ins first, or have them use live or delegate event handlers (this latter option is the best - but it might mean changing the code of the plug-ins).
Allan
I'm using your updated code but when I put it into my default template it doesn't show the table sort options or the pagination or the search box to filter. I'm sure the is a confict with something in your code not working with something in my own (which I admit is just the default templates hacked together by me).
I put the two pages side by side in this demo:
http://whitefeatherphoto.com/demo/demo.cfm
That page is just your code but hosted on my site (yes I know I'm linking to your resources but that is just for this demo period till I figure out what is wrong. Once this get's figured out I'll copy the files to my own host).
Then I take your code and put it in my page template and again the table shows up fine but all the extra options stop working.
Any help you can offer about what I'm doing wrong would be appreciated.
Thanks,
> TypeError: 'undefined' is not a function (evaluating '$('#example').dataTable')
Simple reason is that you are loading jQuery twice:
[code]
[/code]
and the second one overwrites the first.
Btw - I wouldn't use DataTables.net as a CDN like that. It is not designed to be and the path names could change in future. DataTables is available on the Microsoft Ajax CDN which is an excellent CDN network: http://datatables.net/blog/Microsoft_CDN .
Allan
I thought that might have been the case but I tried by taking our the jquery.js from your code not from my own. I figured that it was the same but something in yours seems to be necessary where as something in mine seems to be missing.
As for the CDN I was just going to host on my own site rather then external links form another site. I just left the code as it was to help you spot yours versus mine.
Thanks again,
Allan
Thanks for clarifying that. This is what happens when I stare at code too long. I will remember that next time and now I think you also fixed another problem I had with a different jquery product I was trying to integrate.
Allan
For a project, I need to use bootstrap and datatables but I meet problems :
- there is a conflict between the jquery of bootstrap and the jquery of datatables : the display of "aButtons" does not.
- when I remove jquery of bootstrap, the display of "aButtons" does but saving the table is impossible.
Someone he solutions?
Thanks in advance,
Gauthier
Allan
Gauthier
Thanks for the great plugin. It's the best one out there!
I used a previous version of datatables.. before I started into twitter bootstrap. I followed the instructions and have the tables sorting and even have all the sort_buttons working. But I also had a nice little feature to not sort selected columns and hide the sort image.
eg.
[code]
var dontSort = [];
$('#myTable thead th').each( function () {
if ( $(this).hasClass( 'no_sort' )) {
dontSort.push( { "bSortable": false } );
} else {
dontSort.push( null );
}
});
$('#myTable').dataTable({
"aoColumns": dontSort,
"sPaginationType": "full_numbers"
});
[/code]
Now this does not work and I get the following error.
DataTables warning (table id = 'myTable'); Cannot reinitialize DataTable.
To retrieve the DataTables objst for this table, pass no arguments or see the docs for bRetrieve and bDestroy.
While it is not really important I thought it was nice to hide the sort images and not sort certain columns. Can you think of an easy way to fix this?
Thanks
Wayne
Unfortunately the bSortable parameter cannot be changed dynamically after a DataTable has been initialised. You either need to destroy and the recreate the table ( bDestroy ) which is a fairly expensive process, or you need to add this feature to DataTables / work through the private "api" to manipulate the table into doing what you need.
Sorry - no easy way to fix it properly.
Allan
EDIT: never mind, got it. overwrote the bootstrap css for the .row inside my container to have no left margin.
Great stuff!!!
[code]$('#example').dataTable( ... );[/code]
Why is this preferable to using jQuery's class selector:
[code]$('.DataTable').dataTable( ... );[/code]
?
Allan
I'm using Twitter bootstrap, and i need to change the Search Control or Filter to the input-prend class and with another controls inside like a 'span' and 'i'. I made some changes on source code but i want to know if there is another way to do it with extensions or something.
I changed in function _fnFeatureHtmlFilter
after line [code]var oPreviousSearch = oSettings.oPreviousSearch;[/code]
and before line [code]var nFilter = document.createElement('div');[/code]
the following code:
[code]
var searchControl = '';
var sSearchStr = oSettings.oLanguage.sSearch;
if (oSettings.sPaginationType == "bootstrap") {
var bootstrapSearchControl = '';
searchControl = bootstrapSearchControl;
sSearchStr = "";
}
sSearchStr = (sSearchStr.indexOf('_INPUT_') !== -1) ?
sSearchStr.replace('_INPUT_', searchControl) :
sSearchStr === "" ? searchControl : sSearchStr + searchControl;
[/code]
Thanks for your help.
Best Regards,
Allan
This is not working in the twitter bootstrap themed Datatables.
Allan
http://datatables.net/blog/Twitter_Bootstrap_2
but I dont understand where to add the "Sorting" code, in which file?
bootstrap.css or bootstrap.js or my .html file ??
Also do I have to install Data tables or is it part of the Twitter bootstrap?
Please let me know
Thanks,
_Peter
DataTables is a jQuery plug-in for adding interaction controls to HTML tables. It is not part of Twitter Bootstrap - you need to install DataTables. See: http://datatables.net/blog/Getting_started_with_DataTables%3A_First_steps
Allan