The last `row` (rather than column) ? There is no way to disable sorting for a single row. If you want it for the last column use `aTargets: [ -1 ]` (which counts from the right), but for a row to be fixed at the bottom of the table, you'd need to use a TFOOT element.
Hi, i have not used datables before, but i do use twitter bootstrap. This example is really awesome and i have been trying to get something like this.
I am confused as to how where to start off.
Please send me step by step instructions on how to accomplish your example (not necessarily detailed).
Thank you.
I am working on one web application where we have used only html, jquery and C code as backend. I have used twitter bootstrap into it. I want to load dynamic data using ajax into datatable, but the problem is datatable not initialize after complete the ajax request. Can you help me to get rid of it?
Into my web page, I have send multiple ajax request to c page to get data in the bunch of 20 records as a string( json is not possible), and then I have split the string and make an array and display that array values into table. This part is done, but the pagination, search and number of records per page dropdown are not work as per given demo. I mean the table is work as normal table not datatable.
Hi guys, awesome work on making datatables compatible with bootstrap. but, as allways, with GUI components, for whatever language there is, there are allways components missing which sometimes leads to frustration. in the case of bootstrap, for example, this component is missing by default:
https://github.com/danielfarrell/bootstrap-combobox
I'd love to know how to make the datatables 'records-per-page' box modifiable so it uses the
bootstrap-combobox :)
I am using datatables with bootstrap and mostly it is superb. The header and pagination styling all looks great. However, I still seem to have the purple styling on the stripes. How do I get thsi to be the cool grey?
@Michael - Please link to a test case so I can give you an answer without guessing :-). I'm going to guess that you are including some of the default DataTables stylesheets. This isn't needed - you just need Bootstrap and the DataTables bootstrap integration file.
The size of datatable is longer than . I think that there's a problem with .container in bootstrap.css, but I don't know way to fix it. If i remove class "container" in , the size of table is OK, but the "...records per page" and "Search" input is not in the same line.
I am trying to use dataTables+bootstrap with "sScrollY" option. My styling for the table is
.
So, everything works except it looks a little ugly with this table-bordered style but I need it to split columns. Maybe you have some ideas how I can tweak DT_bootstrap.css to make it look more nicely. I assume the problem is that with "sScrollY" the table is split into two tables (headers and columns) and both have all bootstrap styles applied.
@KbFwthoxvgXs - are you using the latest integration files from here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap ? If so and it still isn't well styled, can you link us to the page please.
Thanks. Using the latest files from github helped, now it looks better :-).
Another little question. Is it possible for dataTable not to use the pagination but let the user to select the number of rows to be displayed. I plan to select the whole records via Ajax, so I do not need a pagination, but I still want to provide a selectbox for changing the amount of visible records.
> Another little question. Is it possible for dataTable not to use the pagination but let the user to select the number of rows to be displayed
I don't really understand that I'm afraid. Surely if the records are limited, then they have to be paged? However, yes it is possible, just drop the paging control ( `p` ) from sDom .
My question was so weird because when I put [code]"bPaginate": false[/code] it removed both the pagination control and a select with result sizes. Probably it is reasonable because they are related. But I needed the select, that's why was asking.
Anyway, thank you very much for advice, I will try just dropping ( [code]p[/code] ) from sDom.
Hi.
I recently tried twitter bootstrap and data tables and followed the instruction, but i was not able initialize data tables to work within multiple tabs of twitter-bootstrap. The data tables is visible only in the first tab. Can you help me with this problem?
http://jsfiddle.net/lamtei/SZeTt/12/
Hi guys, can i put bootstrap datatable and modal discussion here? i m facing a problem in using datatable and modal in one page. Before adding datatable in the page, my modal popup is working fine. But after adding datatable, modal popup does not appear any more. Anyone has encountered the problem before? Any help would be very thankful.
I'm having a problem in that the sort (asc/desc) arrows are displaying underneath the header and is obscured from view. Can you help with that? Also, the row that says Show ## entries is shifted off to the left of the containing element (partially offscreen.) Any idea why that would be?
Replies
But what if I dont want to include the last column for sorting (its a column for total data):
also I would like to add "ALL" option in paging. Do you have anything for that?
please check the code:
Thank you for your time
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
<!-- -->
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Trident
Internet
Explorer 4.0
Win 95+
4
X
Trident
Internet
Explorer 5.0
Win 95+
5
C
Trident
Internet
Explorer 5.5
Win 95+
5.5
A
Trident
Internet
Explorer 6
Win 98+
6
A
Total
Win = 4, Max =0
4
[/code]
Use bSortable .
> also I would like to add "ALL" option in paging. Do you have anything for that?
Use aLengthMenu .
Allan
[quote]allan said: Use aLengthMenu .[/quote]
aLengthMenu is working!
[quote]allan said: Use bSortable .[/quote]
bSortable example is working for column(s),
[code]
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
] } );
} );
[/code]
but I want to disable the last Row and data is dynamic so I dont know the amount of Rows
do you have anything like "aoColumnDefs" for Rows
I have also tried:
(but its not working!)
[code]
Total
Win = 4, Max =0
4
[/code]
Please let me know if you have a solution..
Thanks,
_Peter
Allan
So I just separated end row with (this way sorting doesn't work on it!); something like this:
[code]
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Trident
Internet
Explorer 4.0
Win 95+
4
X
Trident
Internet
Explorer 5.0
Win 95+
5
C
Total
Win = 4, Max =0
4
[/code]
Thanks for all your help!
cheers
Allan
I am confused as to how where to start off.
Please send me step by step instructions on how to accomplish your example (not necessarily detailed).
Thank you.
I am working on one web application where we have used only html, jquery and C code as backend. I have used twitter bootstrap into it. I want to load dynamic data using ajax into datatable, but the problem is datatable not initialize after complete the ajax request. Can you help me to get rid of it?
Into my web page, I have send multiple ajax request to c page to get data in the bunch of 20 records as a string( json is not possible), and then I have split the string and make an array and display that array values into table. This part is done, but the pagination, search and number of records per page dropdown are not work as per given demo. I mean the table is work as normal table not datatable.
https://github.com/danielfarrell/bootstrap-combobox
I'd love to know how to make the datatables 'records-per-page' box modifiable so it uses the
bootstrap-combobox :)
setTimeout(function(){
$('select[name="membertable_length"]').attr('class', 'combobox');
// make it so.
$('.combobox').combobox();
}, 1000);
The setTimeout is not a good way but this was just a quick test. However, i am getting the following error:
Uncaught TypeError: Cannot read property 'webkit' of undefined
I think it's related to the bootstrap-combobox requiring a plugin... Can anyone can reproduce this and let me know if you get an error?
Allan
I am using datatables with bootstrap and mostly it is superb. The header and pagination styling all looks great. However, I still seem to have the purple styling on the stripes. How do I get thsi to be the cool grey?
Michael
Allan
Section 1
Section 2
Section 3
Section 2 content.
Section 3 content
[/code]
When I added
into
The size of datatable is longer than . I think that there's a problem with .container in bootstrap.css, but I don't know way to fix it. If i remove class "container" in , the size of table is OK, but the "...records per page" and "Search" input is not in the same line.
Somehow old dataTables code had found its way into public/assets/application.css. Removing that and the class="display" sorted things out
I am trying to use dataTables+bootstrap with "sScrollY" option. My styling for the table is
.
So, everything works except it looks a little ugly with this table-bordered style but I need it to split columns. Maybe you have some ideas how I can tweak DT_bootstrap.css to make it look more nicely. I assume the problem is that with "sScrollY" the table is split into two tables (headers and columns) and both have all bootstrap styles applied.
Allan
Another little question. Is it possible for dataTable not to use the pagination but let the user to select the number of rows to be displayed. I plan to select the whole records via Ajax, so I do not need a pagination, but I still want to provide a selectbox for changing the amount of visible records.
I don't really understand that I'm afraid. Surely if the records are limited, then they have to be paged? However, yes it is possible, just drop the paging control ( `p` ) from sDom .
Allan
Anyway, thank you very much for advice, I will try just dropping ( [code]p[/code] ) from sDom.
I recently tried twitter bootstrap and data tables and followed the instruction, but i was not able initialize data tables to work within multiple tabs of twitter-bootstrap. The data tables is visible only in the first tab. Can you help me with this problem?
http://jsfiddle.net/lamtei/SZeTt/12/
Allan