I am using jQuery DataTables. It is being populated with JSON data from a database. I can't figure out how to display a button or link in front of each record. I want to make it so that when the user clicks on that button then that particular record gets added in the database, so the button or link should contain an ID. Please help sort out my problem.
Below is the code I'm using:
var oTable = $('#jsontable').dataTable();
$.ajax({
url: 'process.php?method=fetchdata',
dataType: 'json',
success: function(s) {
console.log(s);
oTable.fnClearTable();
for (var i = 0; i < s.length; i++) {
oTable.fnAddData([
s[i][3],
s[i][4],
s[i][0], // this contains id
]);
}
},
error: function(e) {
console.log(e.responseText);
}
});
<table id="jsontable" class="display table table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Class Number</th>
<th>Subject</th>
<th>ADD</th>
</tr>
</thead>
</table>
I hope this is help
oTable = $('#jsontable').dataTable({
"fnRowCallback": function (nRow, aaData, iDisplayIndex) {
//nRow Row Object
//aaData Param
//iDisplayIndex Row Index
$('td:eq(0)', nRow).html("<input type='button'>Button</input>");
return nRow;
}
});
Do you mean to do something like this? (Also, this may be for an older version of datatables, now that I think about it. This is syntax for version 1.9, and I would guess you're using a more recent version (1.10+) The syntax may be a little different, but it should be documented in the api docs.
$('#jsontable').dataTable({
"sAjaxSource" : "process.php?method=fetchdata",
"aoColumns" : [
{ "mData": function(source) {
return '<input type="button" value=' + source[0] + '/>';
}},
{ "mData": function(source) {
return source[1];
}},
{ "mData": function(source) {
return source[2];
}}
}
});
Obviously, your button can look however you want, you probably don't want the id stored on the value. You can do what you need with it.
Related
I'm facing an issue using the Datatables plug-in regarding a table reload after the user adds a row.
I'm receiving some JSON data as part of a webservice call, after successfully receiving that data, I am calling a function that will build the table rows and append them to the tbody of the datatable as follows:
const buildTableRows = obj => {
const table = document.querySelector('#participantes tbody');
table.innerHTML = "";
for (item of obj) {
const tableRow = `<tr id="${item.ContactoId}" data-contributos="${item.Contributos}" data-updated="false" class="participante-row"><td><i class="material-icons">arrow_right</i>${item.Nome}</td><td class="contributos"><input value="${item.Contributos}">   <i class="material-icons delete">delete_forever</i></td></tr>`;
table.insertAdjacentHTML('beforeend', tableRow);
}
}
After this, I call another function responsible for initializing the Datatable and saving it to a global object for future reference:
const buildDataTable = () => {
const table = $('#participantes').DataTable({
"pagingType": "simple_numbers",
"pageLength": 4,
"lengthChange": false,
"columnDefs": [{
"targets": 1,
"orderable": false
}],
responsive: true
});
controlObj.datatable = table;
}
In my HTML I have a dynamically generated select element which lets the user add a row to the table. When the user adds the row, those two functions get called again. I can see the new row in my data structure but the table doesn't get refreshed without a page reload. I went through the plugin docs and tried to use the destroy method, rows.add(), clear(), draw() etc.. but nothing seems to work for me. The table structure is already in the DOM, I just need to reload the table. Any help would be much appreciated
Datatable cannot be clear and redraw for updated HTML DOM for table but it has to be inserted using JSON array.
To refresh it after change in DOM, you need to destroy the table and re-initalize it.
See below example where on click of ADD button I have added new row and reiniitalized the table but before that I have destroyed it.
$(document).ready(function() {
//Initialize the table and save it in a variable.
var table = $('#example').DataTable();
var id = 0;
$('#add').on('click', function(){
table.destroy();
//add row to the table
var html = '<tr><td>' + id + '</td><td>First Name' + id + '</td><td>Last Name' + id + '</td></tr>';
//console.log(html);
$('#example tbody').append(html);
id++;
table = $('#example').DataTable();
});
} );
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
</tr>
</thead>
<tbody>
<tr>
<td>00</td>
<td>First</td>
<td>Last</td>
</tr>
</tbody>
</table>
Click Button to Add row : <input id="add" value=" ADD " type="button">
Yes you can use DataTable api. without destroying table you just need a function.
$(document).ready(function() {
var dt = $('#example').DataTable();
$('#addRow').click(function () {
var rowHtml = $("#newRow").find("tr")[0].outerHTML
console.log(rowHtml);
dt.row.add($(rowHtml)).draw();
});
});
here is working example
I'm trying to delete a row from a Datatable that uses server side processing (removing the row data and the row/tr visually) based on the value of certain attribute of the row.
I'm using the remove() function to do it and it removes the row data, but visually the table stills the same.
So I added the draw() function but it reinitializes the table, including the data.
So, how can I "redraw" the table after removing a row from the Datatable that uses server side processing? Is there any other function like draw() to redraw the table but using only the existing data in the datatable?
$("#tableSelector").DataTable()
.rows( function ( idx, data, node ) {
return data.attribute_value == value_to_delete;
} )
.remove()
.draw();
Finally, I found the solution.
I followed this thread then read about the DataTable's property "dataSrc".Then with this information searched for something similar in Stack Overflow and found this.
So the trick to do what I asked for was to use a variable to filter the row which I want to ignore in the ajax call.
I've reused the code provided in the referred question. And this is the result:
HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Subject</th>
<th>Status</th>
<th>Message</th>
<th>Details</th>
</tr>
</thead>
</table>
JS:
$(document).ready(function() {
function loadDataTable(excluded_name = undefined){
$("#example").DataTable().destroy();
$('#example').DataTable({
// "processing" : true,
"ajax" : {
"url" : "https://api.myjson.com/bins/12uwp2",
"dataSrc": (json) => {
if(excluded_name !== undefined){
return json.filter((item) => item.name !== excluded_name)
}else{
return json
}
}
},
"columns" : [ {
"data" : "name"
}, {
"data" : "email"
}, {
"data" : "subject"
}, {
"data" : "status"
},{
"data" : "message"
},
{
"mData": "Details",
"mRender": function (data, type, row) {
return "<a class='delete' data-name='"+ row.name + "' data-id=" + row.id + " href='/Details/" + row.id + "'>Delete</a>";
}
}]
});
}
$(document).on("click", ".delete", function(e) {
e.preventDefault()
let excluded_name = $(this).data("name")
alert("Excluding this name in the next load: " + excluded_name);
loadDataTable(excluded_name);
})
loadDataTable();
});
Fiddle: https://jsfiddle.net/ek94mh1x/4/
Note: This is a client side "delete", I know this could be done with server side processing, but in my case I was only allowed to do it in the client side.
Additionally, in case you need to delete multiple rows you could use an array as a parameter and follow the same logic.
I hope this could help someone.
I use JQuery DataTable. I send data to datatable onclick in json file at ajax succes .the first click everything is good,But the next click I get only the right data ANd wrong value of dataTables_info it display always the first value of dataTables_info And paginatio AND row too from the first result.
This is the first display of data in datatable:
ALL the next Click I get only right data:
For this exemple they are one result showing in picture below but everything else(info ,show,pagination) belong to first search showing in the first picture :
In the second Exemple When I click at any page of pagination I get the content of the first page result!!
This is my function ONclick:
$ ( '#ButtonPostJson' ).on('click',function() {
$("tbody").empty();
var forsearch = $("#searchItem").val();
$.ajax({
processing: true,
serverSide: true,
type: 'post',
url: 'searchData.json',
dataType: "json",
data: mysearch,
/* bRetrieve : true,*/
success: function(data) {
$.each(data, function(i, data) {
var body = "<tr>";
body += "<td>" + data.name + "</td>";
..........................
..........................
body += "</tr>";
$('.datatable-ajax-source table').append(body);
})
;
/*DataTables instantiation.*/
$('.datatable-ajax-source table').dataTable();
},
error: function() {
alert('Processus Echoué!');
},
afterSend: function(){
$('.datatable-ajax-source table').dataTable().reload();
/* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();
$(this).parents().remove();
$('.datatable-ajax-source table').dataTable().clear();*/
}
});
});
I try everything and i dont know what I miss.
I use this jquery for datatable:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
Thanks.
Use like it
$('#product_table').DataTable().ajax.reload();
Get table id first, like:
var table=('#tableid').Datatable();
table.draw();
just put these lines after ajax success function to reload datatable
On a button clik you dont need to empty your table body and make initiate the datatable again with the ajax.
you just have to call your ajax again as you have already initiate on document ready function
just use
$("#Table_id").ajax.reload();
check the below link, you will have better idea.
https://datatables.net/reference/api/ajax.reload()
Let me know if this doesn't help you
I had this same problem. I found a function I wrote on a project that deals with this. Here is a simple 2 column table I made.
<table id="memberships" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>Member Name</th>
<th>Location</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Member Name</th>
<th>Location</th>
</tr>
</tfoot>
</table>
This is my script to populate it:
function drawTable(){
var table = $('#memberships').DataTable();
table.destroy();
value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
"url": `//BACKEND API CALL`,
"type":"get",
"dataSrc": 'members'//my data is in an array called members
},
columns: [
{"data": "name_display" },
{"targets": 0,
"data": "membershipID",
"render": function ( data, type, full, meta ) {
return '<button type="button" class="btn btn-info btn-block"
onclick="editMember(' + data + ')">Edit Member</button><button
type="button" class="btn btn-danger btn-block"
onclick="deleteMember(' + data + ')">Delete</button>';
}
}
]
});
$.fn.dataTable.ext.errMode = 'none';
}
You can ignore my column render function. I needed 2 buttons based on the data returned. The key was the table.destroy in the function. I created the table in a variable called table. I destroy it right in this initialization because it allowed me to use this same function over and over. The first time it destroys an empty table. Each call after that destroys the data and repopulates it from the ajax call.
Hope this helps.
Update: After playing with datatables alot more I found that setting table to a variable in a global scope to your function allows you to use reload.
var table = $('#memberships').DataTable({});
Then
table.ajax.reload();
should work.
I created this simple function:
function refreshTable() {
$('.dataTable').each(function() {
dt = $(this).dataTable();
dt.fnDraw();
})
}
use below code..it perfectly work, it keep your pagination without lose current page
$("#table-example").DataTable().ajax.reload(null, false );
$('.table').DataTable().ajax.reload();
This works for me..
$("#Table_id").ajax.reload(); did not work.
I implemented -
var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;
.reload() is not working properly untill we pass some parameter
var = $("#example").DataTable() ;
datatbale_name.ajax.reload(null, false );
Try This i hope it will work
$("#datatable_id").DataTable().ajax.reload();
Forever, we have been using javascript functions to pass data from a table to whatever we need to do with that row of data. For example, take this table:
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jack</td>
<td>edit</td>
</tr>
<tr>
<td>Dan</td>
<td>edit</td>
</tr>
<tr>
<td>Mark</td>
<td>edit</td>
</tr>
</tbody>
</table>
Normally, we would just have the following function to do something with the data that changes by row (typically passing an id, but sometimes there could be a bunch of args in the function). This function could do a variety for things - not just these examples of course.
function myfunc(f_ID, f_Name) {
alert(f_ID + "_" + f_Name);
$.colorbox({ iframe: true, overlayClose: true, opacity: .70, inline: false, fixed: true, title: "Colorbox Title", href: "/mypage.asp?id=" + f_ID + "&name=" + f_Name });
}
OR
function myfunc(f_ID, f_Name) {
if (confirm("Are you sure that you would like to permanently delete id # " + f_ID + " for " + f_Name + "?")) {
window.location = "/mypage.asp?id=" + f_ID + "&name=" + f_Name
}
}
I know that it's probably not the best to mix Jquery and old school JS like this (maybe it's fine??), so there must be a better way to access this data.
I was thinking that I could use "data-" tags, but the issue is how do you actually get the value when there are multiple rows? I cannot use an ID since it's unique and if I added a class, how do I access the data from the call?
Any help would be greatly appreciated, thank you!
UPDATE
This worked as the answer for my sitaution. Thanks #Quentin!
<a class="testlink" href="#" data-id="1234">edit</a>
$("a.testlink").on("click", myAction);
function myAction(event) {
event.preventDefault();
alert($(this).data("id"));
}
First: Work out what you want to happen if the JS isn't available.
An ordinary link will do.
edit
You don't need the id and the name separately in your code, you only used them in the URL, which appears in the page itself, and you can read the URL from the link directly.
this (in an event handler) refers to the element that was used to trigger the event.
jQuery(function() {
$("a").on("click", openColorBox);
function openColorBox(event) {
event.preventDefault();
var url = this.href;
$.colorbox({
iframe: true,
overlayClose: true,
opacity: .70,
inline: false,
fixed: true,
title: "Colorbox Title",
href: url
});
}
});
If you really needed to pass additional data, then you could read it from data attributes via:
edit
…
function openColorBox(event) {
event.preventDefault();
alert( jQuery(this).data("somedata") );
… but traversing the DOM …
var name = jQuery(this).parents("tr").find("td:first-child").text();
… or using attributes designed for the specific data you are using (if they exist) would be better.
I'm using jQuery and django
I have a dynamic table generated by jQuery, which holds the email field and password field and the delete button that could remove the row:
$("button#genBtn").click(function() {
var t = $("input#inputEmail").val();
var p = $("input#inputPassword").val();
var delBtn = $('<button class=\"btn btn-danger\">delete</button>');
var row = $("<tr><td>" + t + "</td><td>" + p + "</td><td></td></tr>");
$('td:last', $(row)).append(delBtn);
$(delBtn).bind("click", deleteNode);
$("table tbody").append(row);
});
This is the table:
<table class="table table-striped">
<thead>
<tr>
<th>email</th>
<th>password</th>
<th>action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Let say I'd like to get the data of all rows from this table, and post it to sever side. How could I do that?
Without any additional libraries, something like this:
(1) get the data from the table
function getTableData()
{
// Array of data we'll return
var data = [];
// Counter
var i = 0;
// Cycle through each of the table body's rows
$('tbody tr').each(function(index, tr) {
var tds = $(tr).find('td');
// Check we've got two <td>s
if (tds.length > 1) {
// If we do, get their text content and add it to the data array
data[i++] = {
email: tds[0].textContent,
password: tds[1].textContent
}
}
});
return data;
}
(2) post it to the server
$.ajax({
method: 'post',
url: '', // Set the URL of whatever in Django will handle your post
data: getTableData()
});
However, if I were attempting this task, I would achieve (1) by using Knockout, which would allow for a much better separation between view and viewmodel (or between template and view, you might think of them, as a Django user). Great that you're using a decent server-side framework, would be a pity to end up with spaghetti code on the client!