When I delete the line “paginate”: false inside of the javascript box,
the Fixedheader doesn’t work anymore but I don’t want pagination. Is there any way to avoid this?
Here's the code: http://jsfiddle.net/xF8hZ/128/
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false
"paginate": false
} );
new $.fn.dataTable.FixedHeader( table, { "left": true } );
$('.filterName').on('click', function(e) {
e.preventDefault();
var filterValue = $(this).data('filter');
table.column(0).data().search(filterValue).draw();
});
} );
I assume you meant to say
When I put the line “paginate”: false inside of the javascript box...
That's because you missed a comma there, should look like this:
$(document).ready(function() {
var table = $('#example').DataTable( {
"bSort": false,
"paginate": false
} );
Related
I have a datatable and i would like to check if all radio buttons are checked but this works only for the first paginated page but fails to check the other pages
this is my code:
var dt = $('#newtable').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
This is what am using to check
$("input:radio").change(function() {
var all_answered = true;
dt.rows().nodes().each(function() {
if($(":radio:checked").length == 0)
{
all_answered = false;
}
})
if(all_answered==true ){
$('input[type=text]#general_comment').removeAttr("disabled");
approvebtn.removeAttr("disabled");
}else {
approvebtn.prop("disabled", "disabled");
}
});
You can bind a page event on your DataTable once the datatable is initialized, which on pagination (page change) will check what you want.
$('#newtable').bind('page', function () {
//call to check what you want.
});
I am using DataTables jquery plugin to make my tables sortable. I need to rearrange columns after the table is created to make it look more logical, but after that it still does sort, but the result looks random. I can't get it to work, although (at least I think so) I am initiating datatable after the rearrangement.
function initTable() {
$('tr').each(function () {
$('td:last', this).remove().insertAfter($('td:first', this));
});
var table = $('#dashTable').dataTable({
"paging": false,
"ordering": true,
"info": true,
"order": [[0, "asc"]]
});
fixHeader(table);
}
If I don't call $('tr').each everything works as expected.
If you need to reorder the columns after the dataTable is initialized, then I strongly recommend you are using the ColReorder plugin.
var table = $('#dashTable').dataTable({
...
colReorder: {
order: [1, 5, 2, 3, 4] //alternative order
}
});
If you just want to reorder the table columns before dataTables is initialized, then be sure to avoid asynchronicity traps by using a callback. As your code is constructed dataTable({..}) is likely to be executed before the each() loop has finished :
var table;
function initTable() {
function reorder(callback) {
//good idea to include header titles when reordering
$('thead tr').each(function () {
$('th:last', this).remove().insertAfter($('th:first', this));
})
var len = $('tbody tr').length;
$('tbody tr').each(function () {
$('td:last', this).remove().insertAfter($('td:first', this));
if (!--len) callback();
})
}
reorder(function() {
table = $('#dashTable').dataTable({
"paging": false,
"ordering": true,
"info": true,
"order": [[0, "asc"]]
});
//fixHeader(table); guess this is the <th> reordering
})
}
I'm initializing the .dataTable() the following way:
$(document).ready(function(e) {
var articles_table = $("table#datatable-articles").dataTable({
'bProcessing': true,
'bServerSide': true,
'rowHeight': 'auto',
"bAutoWidth": true,
'sAjaxSource': '/admin/articles/data',
sPaginationType: "full_numbers",
});
Then, I'm trying to get the id value that is in the tbody > tr > td:first and save it in a variable, and then hide the field. No luck, everything that I tried, didn't work.
var ex = $('table#datatable-articles');
if ( $.fn.DataTable.fnIsDataTable( ex ) ) {
console.log(ex.find('tbody tr td:first'));
ex.find('tbody tr td:first').css('backgroundColor', 'blue');
}
/
articles_table.$('tbody tr:odd').css('backgroundColor', 'blue');
console.log(articles_table.find('tbody tr td:first').val());
articles_table.find('tbody tr td:first').html('1');
All the above executes on dom ready, but then the dataTable is initialized and replaces everything with its data
The basic question is: How to obtain the id value from the table data and then hide it?
This is what I ended up with, and it works...
inside dataTable() have added the following
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("data-id",aData[0]);
return nRow;
}
I have a select menu with two options "All" and "test".....when I select "All" a datatable with 15 columns is shown and when "test" is selected, another datatable with 5 columns is selected....
When there are less than or equal to 5 items, the pagination should be disabled...
This is what I've done so far,
created the 2 datatables as mentioned,
function All(){
$('#All').dataTable({
"iDisplayLength": 5,
"sPaginationType": "four_button",
"bJQueryUI": true,
"bRetrieve": true,
"bAutoWidth": false,
"fnDrawCallback": function() {
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').hide();
}
}
});
}
function Test(){
$('#Test').dataTable({
"iDisplayLength": 5,
"sPaginationType": "four_button",
"bJQueryUI": true,
"bRetrieve": true,
"bAutoWidth": false,
"fnDrawCallback": function() {
if (Math.ceil((this.fnSettings().fnRecordsDisplay()) / this.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').hide();
}
}
});
}
$(document).ready(function(){
$('#List').val('All');
All();
$('#test').hide();
$("#List").change(function(){
if(this.value == 'All'){
All();
$('#All').show();
$('#Test_wrapper').hide();
}
else if (this.value == 'Test'){
Test();
$('#Test').show();
$('#All_wrapper').hide();
}
});
});
As you can see, I'm checking for the pagination in the "fnDrawCallBack" function......
The page loads find when called upon initially.....but when I select All after selecting test, the pagination disappears, understandably......
is there any work around for this? Any help is appreciated....
Thanks
Never mind, found a solution to implement this......
In documennt.ready function, put something like this inside the if condition for each table........
$("#productsList").change(function(){
if(this.value == 'All'){
All();
all.fnPageChange( 'first' );
$('#All').show();
$('#Test').hide();
if (Math.ceil((all.fnSettings().fnRecordsDisplay()) / all.fnSettings()._iDisplayLength) > 1) {
$('.dataTables_paginate').css("display", "block");
} else {
$('.dataTables_paginate').hide();
}
Also, you do a similar if loop when "test" is selected from drop down...
The other way that I tried doing it, (found the above solution more feasible, that's it)...
Try to identify if the child node is active using jQuery....by putting this inside your if condition of the documenty.ready function when the value changes,
if($('#Test_wrapper #paginate_next').hasClass('paginate_enabled_next') || $('#Test_wrapper #paginate_previous').hasClass('paginate_enabled_next')){
$('#Test_wrapper .dataTables_paginate').css("display", "block");
} else {
$('#Test_wrapper .dataTables_paginate').hide();
}
Note: The above mentioned method's only hides your pagination.....
I've tried, destroying my old table and recreating it but that was showing a javascript error, didn't have time to look into it....shall do when I've time :)
Please let me know, if there is a better solution to this......
Cheers and thanks for taking time to read this off :)
I can't get my pagination to work after I added a date filtering plug-in to datatables.
The original code was like this and it was picking up the pagination fine.
$(document).ready(function() {
$('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
this is my current one with the plug in variables
$(document).ready(function() {
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});
Thanks in advance.
Well, in your current function, this part:
var oTable = $('#table1').dataTable();
"sPaginationType": "full_numbers"
should be written like this:
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
Edit
In case it wasn't clear, the full jQuery code should look like this:
$(document).ready(function() {
var oTable = $('#table1').dataTable({
'sPaginationType': 'full_numbers'
});
/* Add event listeners to the two range filtering inputs */
$('#min').keyup( function() { oTable.fnDraw(); } );
$('#max').keyup( function() { oTable.fnDraw(); } );
});