datatable - multiple tables on same page, but only one is responding - javascript

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.

Related

Bootstrap Popover in JQuery Datatable doesn't work after search

I have a HTML table:
<table id="PeopleTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pop</th>
</tr>
</thead>
<tbody>
<tr><td>0</td><td>Michael</td><td><button class='popoverButton'>Popover</button></td></tr>
</tbody></table>
And I want to use the DataTables plug-in to have search, order and filter functionality. I also want to use Bootstrap to show a popover when the button is clicked, so I've tried this:
var peopleTable = $('#PeopleTable').DataTable({
drawCallback: function () {
$('.popoverButton').popover({
"html": true,
trigger: 'manual',
placement: 'left',
"content": function () {
return "<div>Popover content</div>";
}
}).click(function (e) {
$(this).popover('toggle');
e.stopPropagation();
});
}
});
The problem is: when I perform a search, column sorting or any operation with the DataTable, the Popover stops working.
Here is the fiddle if you want to try it.
Is "draw" the correct event to perform this or should I use another one? Am I missing any other thing?
Updated JS fiddle link - https://jsfiddle.net/dxrjm530/4/
You just need to take out your click event of button, because after sorting, it is getting called twice, due to drawcallback method of datatable.
$('#PeopleTable').DataTable({
drawCallback: function () {
$('.popoverButton').popover({
"html": true,
trigger: 'manual',
placement: 'left',
"content": function () {
return "<div>Popover content</div>";
}
})
}
});
$('#AddRow').on('click', function(){
var peopleTable = $('#PeopleTable').DataTable();
peopleTable.row.add(
['1',
"David",
"<button class='popoverButton'>Popover</button>"]
).draw();
});
$('table').on('click', function(e){
if($('.popoverButton').length>1)
$('.popoverButton').popover('hide');
$(e.target).popover('toggle');
});
Possible solution: https://stackoverflow.com/a/72850074/979174
const rows = $("#tbl").dataTable().fnGetNodes();
$(rows).find('[data-toggle="popover"]').popover({ html: true, trigger: 'hover', placement: 'bottom', content: function () { return $(this).data('content') ; } });

FixedHead in datatables doesn't work after removing pagination

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
} );

jquery datatables obtain id

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;
}

JQuery Datatables pagination

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(); } );
});

DataTables plugin for jquery and click event

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....
});
}
});

Categories

Resources