I am trying to succeed at getting this jquery plugin to work corretly. What I need is a click event that will alow me to click a row and have a js window that will load another page using the row_id that is the primary key in the database. I'm really lost with javascript but I like the plugin and really would like to have this work if possible. I have been at this for a couple of days now. I know I'm close but haven't hit the mark yet. If someone could please help me, I'd be really grateful. I am using json to import the data.
Here is my current code. It will compile now but the .click event won't fire. :/
$(document).ready(function() {
oTable = $('#search').dataTable(
{
"sPaginationType": "full_numbers",
"bProcessing": true,
"iDisplayLength": 15,
"sAjaxSource": 'json.php',
"fnInitCallback": function ()
{
$(oTable.fnGetNodes() ).click(function ()
{
//alert();
});
}
});
});
You need to replace fnInitCallBack with fnInitComplete and it will work.
oTable = $('#search').dataTable({
"sPaginationType": "full_numbers",
"bProcessing": true,
"iDisplayLength": 15,
"sAjaxSource": 'json.php',
"fnInitComplete": function (){
$(oTable.fnGetNodes()).click(function (){
// my js window....
});
}
});
Related
I have three datatables on my page:
<table class="driving-table">
-- table #1--
</table>
<table class="driving-table">
-- table #2--
</table>
<table class="driving-table">
-- table #3--
</table>
This is the JS that I use to initialise my tables:
var table = $('table.driving-table').DataTable({
rowReorder: true,
dom: 'Bfrtip',
"bFilter": true,
buttons: [
'copyHtml5', 'excelHtml5', 'pdfHtml5', 'print'
],
"paging": false, //Hide the "Show entries" and "Paging"
"bInfo": false
});
//Searching:
$('#top_search').on( 'keyup', function () {
table.search( this.value ).draw();
});
However, using above, I am only able to get the search input to work on table #3. same goes for the buttons
Here is a jsFiddle that is showing the issue.
As you can see, only the bottom table is searchable, and only the bottom tables buttons is being placed in .button-holder.
What am I doing wrong?
You can use tables() API method as shown below:
$('#top_search').on( 'keyup', function () {
table.tables().search( this.value ).draw();
});
table.tables().buttons().container()
.appendTo( '.button-holder' );
See updated jsFiddle for code and demonstration.
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
})
}
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
} );
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(); } );
});