Develop Reference

Implement inline grid editing as global function

Hello I have tried to implement inline grid editing in my datatable .It's working.... But I need to implement the inline editing in other tables .... So I would like to make a global function for this .....
But it shows some error .... This is my code ....
var slug='sales'
window.drawDataTable = function(){
"columnDefs": [
{
targets: [10,11,27,28],
render:function(data){
return moment(data).format('LLLL');
},
},
{'targets': '_all',
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('data-pk', rowData['id']);
const key = Object.keys(rowData)[Object.values(rowData).indexOf(cellData)];
$(td).attr('data-name', key );
}},
{ targets: [0,1], className: ""},
//{targets:'_all',className:"querytruncate"},
{
"targets": [29,30],
"orderable": false
}
],
"fnDrawCallback":function(){
$('#data_table_list td').editable({
params: function(params) {
var pk = $(this).data('pk');
var name = $(this).data('name');
var data = {};
data['field'] = name;
data['value'] = params.value;
data['id'] = pk;
data['slug']=slug;
return data;
},
url: "{% url 'request_access' %}",
success : function(data) {
if (data.status == true) {
toastr.success(data.msg);
} else {
toastr.error(data.msg);
}
},
error: function () {
toastr.error('Something went wrong');
}
});
},
}
So I try to implement like this.... in my core.js
function inline(slug){
$('#data_table_list td').editable({
params: function(params) {
var pk = $(this).data('pk');
var name = $(this).data('name');
var data = {};
data['field'] = name;
data['value'] = params.value;
data['id'] = pk;
data['slug']=slug;
return data;
},
url: "{% url 'request_access' %}",
success : function(data) {
if (data.status == true) {
toastr.success(data.msg);
} else {
toastr.error(data.msg);
}
},
error: function () {
toastr.error('Something went wrong');
}
});
}
and in my html
"columnDefs": [
{
targets: [10,11,27,28],
render:function(data){
return moment(data).format('LLLL');
},
},
{'targets': '_all',
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('data-pk', rowData['id']);
const key = Object.keys(rowData)[Object.values(rowData).indexOf(cellData)];
$(td).attr('data-name', key );
}},
{ targets: [0,1], className: ""},
//{targets:'_all',className:"querytruncate"},
{
"targets": [29,30],
"orderable": false
}
],
"fnDrawCallback": inline(slug),

In the View how to send a data in javascript to the controller

I have a datatable and I want, when I click some row I get row id and go back to the controller and uptade some data by the row id. I am getting row id(data.SiparisID) BUT I cant send data to controller`#section scripts{
<script>
$(document).ready(function () {
});
$("#SiparisTable").DataTable({
"ajax": {
"url": "/Goster/getList",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "SiparisID" },
{ "data": "SiparisAd" },
{ "data": "SiparisModel" },
{ "data": "SiparisTur" },
{ "data": "SiparisAdet" },
{ "data": "SiparisTarih" },
{ "data": "SiparisDurum" },
{
"data": "SiparisID", "render": function () {
return "<input type='submit' value='Güncelle' class='btn btn-default' onclick='backoperation()' />"
}
}
]
});
var table = $('#SiparisTable').DataTable();
$('#SiparisTable tbody').on('click', 'tr', function () {
var data = table.row(this).data();
alert('You clicked on ' + data.SiparisID + '\'s row');
});
</script>
<script>
function backoperation() {
window.location.href = "#Url.Action("Index", "Guncelle")";
}
</script>
}
`

function backoperation() {
window.location.href = "#Url.Action("Index", "Guncelle")?param=obj";
}
this case it redirect to another page
or
you can make request through Ajax request
"ajax": {
"url": "/Goster/getList??param=obj",
"type": "GET",
"datatype": "json"
},
then it come in your controller
this case it updated in same view

var table = $('#SiparisTable').DataTable();
$('#SiparisTable tbody').on('click', 'tr', function () {
var data = table.row(this).data();
alert('You clicked on ' + data.SiparisID + '\'s row');
$.ajax({
url: '/Guncelle/Process',
type: 'GET',
data: {
id: data.SiparisID,
success: function () { },
error: function () { }
}
});
});**THE VIEW**
public ActionResult Process(int id)THE CONTROLLER
{}
I found this and this work for me. I can get the id in the script with this controller

How to Update Datatable automatically after dialog box is closed in Javascript

Here I have two JS files in which one is main JS file for parent page which contains Datatable which gets populated through ajax call. And other one is specifically for update functionality in which function is defined to update required values into database. That update is done in dialog box. So after successful update sweet alert comes which shows product is successfully updated. So what I want is updated values should be immediately reflected in Datatable of Parent Page. Currently it is showing old value only untill I refresh my page manually. Below are both JS files. And I am new in Javascript and Jquery. So Please help
var oTable;
var url_data_source;
(function(window, undefined) {
window.lastQuery = null;
function initDataSource(after_id) {
url_data_source = '/event/productlocation/ajax?action=data_source';
oTable = $('#datatable').dataTable({
"sAjaxSource": url_data_source,
"bProcessing": true,
"bServerSide": true,
"bFilter": false,
"bRetrieve": true,
"bScrollCollapse": true,
"iCookieDuration": 60*60*24,
"sCookiePrefix": "tkpd_datatable_",
"sPaginationType": "simple",
"scrollX": true,
"aaSorting": [ [0,'desc'] ],
"iDisplayLength": 20,
"aLengthMenu": [[20, 40, 60, 80, 100], [20, 40, 60, 80, 100]],
"oLanguage": {
"sInfoFiltered": "",
"sProcessing": " "
},
"aoColumns": [
{ "sName": "id", "mDataProp": "id"},
{ "sName": "location_id", "mDataProp": "location_id"},
{ "sName": "product_id", "mDataProp": "product_id"},
{ "sName": "status_str", "mDataProp": "status_str"},
{ "sName": "actions", "mDataProp": "actions"},
],
"fnDrawCallback":function(){
},
"initComplete": function(settings, json) {
$("#datatable_paginate").on("click", "#datatable_next", function(){
var after_id = ""
url_data_source = '/event/productlocation/ajax?action=data_source';
after_id_url = $("#after_id_url").val();
after_id = after_id_url.split("after_id=")
url_data_source += "&after_id="+after_id[1];
redraw();
});
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push( {"name": "email", "value": $('#search_email').val()} );
if (after_id != "") {
aoData.push( {"name": "after_id", "value": after_id} );
}
if ($('#search_id_product').val()) {
aoData.push( {"name": "product_id", "value": $('#search_id_product').val()} );
}
$.ajax({
"dataType": 'json',
"type": "GET",
"url": url_data_source,
"data": aoData,
"success": function(result) {
var message_error = result.message_error
if (message_error) {
$('#datatable_processing').css("visibility","hidden");
swal({ title: message_error, type: "error"});
} else if (result.status == "OK") {
result.data = formatingDatatable(result.data)
fnCallback(result)
lastQuery = aoData;
} else {
$('#datatable_processing').css("visibility","hidden");
swal({ title: "Tidak ada hasil", type: "info"});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
swal({ title: manager.getAjaxError(XMLHttpRequest), type: "error"});
$('#datatable_processing').css("visibility","hidden");
$('.load__overlay').hide();
},
beforeSend: function() {
$('#datatable_processing').css("visibility","visible");
$('.load__overlay').show();
},
complete: function() {
$('#datatable_processing').css("visibility","hidden");
$('.load__overlay').hide();
}
});
}
});
}
function redraw() {
$("#datatable").dataTable().fnClearTable();
}
function formatingDatatable(events) {
var result = [];
var uri_next;
$.each(events.location_products, function(i, productlocation) {
result.push({
id: productlocation.id,
location_id: productlocation.location_id,
product_id: productlocation.product_id,
status_str: productlocation.status_str,
actions:'<button class="btn btn-primary waves-effect waves-light m-b-5 btn-sm m-r-5 btn-sm detail-productlocation" data-target="#modal-event-productlocation-detail" data-toggle="modal" data-id="' + productlocation.id + '" product-id="' + productlocation.product_id + '" location-id="' + productlocation.location_id + '" status-str="' + productlocation.status_str + '"><i class="glyphicon glyphicon-list"></i> Details</button>'
});
})
$("#after_id_url").val(events.page.uri_next)
uri_next = events.page.uri_next
result.after_id_url = uri_next
return result
}
function initFilter() {
$("#filter-form").submit(function() {
url_data_source = '/event/productlocation/ajax?action=data_source';
if(oTable == null){
initDataSource("");
} else {
oTable.fnDraw();
}
return false;
});
}
$('#datatable_paginate').on('click', '#datatable_next', function() {
initDataSource("");
})
$('#datatable').on('click', '.detail-productlocation', function() {
$('.load__overlay').show();
$("#modal-event-productlocation-detail").remove();
$(this).removeAttr("data-target", "#modal-event-productlocation-detail");
$(this).removeAttr("data-toggle", "modal");
//var id = $(this).attr("data-id");
var dt = {
"id": $(this).attr("data-id"),
"product_id": $(this).attr("product-id"),
"location_id": $(this).attr("location-id"),
"status": $(this).attr("status-str"),
}
$.ajax({
"url": '/event/productlocation/ajax?action=show_dialog_details',
"type": 'GET',
"data": dt,
success: function (result) {
$('.load__overlay').hide();
$("body").append(result);
$(this).attr("data-target", "#modal-event-productlocation-detail");
$(this).attr("data-toggle", "modal");
$('#modal-event-productlocation-detail').modal('show');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$('.load__overlay').hide();
swal({ title: manager.getAjaxError(XMLHttpRequest), type: "error", });
},
});
});
$(document).ready(function() {
//initDate();
initFilter();
//initCategoryList();
var after_id = "";
initDataSource(after_id);
});
})(window);
event-productlocation-update.js
function sendProductLocationData() {
var jsonData = {};
var formFields = $(":input");
jQuery.each(formFields, function(i, field) { //Accessing all the element of form and get Key and Value
var key = field.name; //Keyname of each Field
var elementid = field.id; //Id of each Field
elementid = "#" + elementid;
var value = $(elementid).val();
jsonData[key] = parseInt(value);
if (key == "status") {
if ($("#event_checkbox_status").is(':checked') == true) {
jsonData.status = 1;
} else {
jsonData.status = 0;
}
}
});
productlocationdetail = JSON.stringify(jsonData); //Creating json Object
$.ajax({
url: '/update/product/productlocation',
type: 'post',
dataType: 'json',
contentType: 'application/json',
data: productlocationdetail,
"success": function(result) {
var message_error = result.message_error
if (message_error) {
$('#modal-event-productlocation-detail').css("visibility", "hidden")
swal({
title: message_error,
type: "error"
});
$('.modal-backdrop').remove();
} else {
$('#modal-event-productlocation-detail').css("visibility", "hidden")
swal({
title: "Product Location Updated Successfully",
type: "info"
});
$('.modal-backdrop').remove();
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
swal({
title: manager.getAjaxError(XMLHttpRequest),
type: "error"
});
$('#modal-event-productlocation-detail').css("visibility", "hidden")
$('.modal-backdrop').remove();
$('.load__overlay').hide();
},
beforeSend: function() {
$('#modal-event-productlocation-detail').css("visibility", "visible")
$('.modal-backdrop').remove();
},
complete: function() {
swal({
title: "Product Location Updated Successfully",
type: "info"
});
$('#modal-event-productlocation-detail').css("visibility", "hidden")
$('.modal-backdrop').remove();
$('.load__overlay').hide();
}
});
}

There are a few way you could handle this.
One way you could handle this is to store the item/s in a variable in a jSON array.
When get confirmation back from the server that that the the update was successful you could then create function to update the dataTable with with this function.
function updateDataTable(dataTableObj,jsonArray)
/*
Clears and populates the dataTable with JSON array
*/
dataTableObj.clear();
jsonArray.forEach(function(row){
dataTableObj.row.add(row);
});
dataTableObj.draw();
}
The other way you could update the table is to create a route on your server that sends the jsonArray but this requires an additional request to the server.
Note: If you use the Ajax call be sure to invoke the function inside the the ajax callback function

Refresh only datatable data Jquery

Im using Jquery datatable to draw a table from an API.And I want to reload the table without getting the re initializing error(only table data if possible) in every 5 seconds.Here is my Code.
var ajax_call$ = function () {
$('#example').DataTable({
"ajax": {
"url": "https://api.coinmarketcap.com/v1/ticker/",
"dataSrc": ""
},
"columns": [
{ "data": "rank" },
{ "data": "name" },
{
"data": "market_cap_usd", render: function (data, type, row) {
return '$' + data;
}
},
{
"data": "price_usd", render: function (data, type, row) {
return '$' + data;
}
},
{
"data": "24h_volume_usd", render: function (data, type, row) {
return '$' + data;
}
},
{ "data": "available_supply" },
{ "data": "percent_change_24h" }
]
});
};
$(document).ready(function () {
ajax_call$();
});

Try this,
2 things,
One change
setInterval( function () {
table.ajax.reload();
}, 5000 );
to
setInterval( submitData , 5000 );
and
table=$('#table').dataTable({
"pagingType" : 'full_numbers',
destroy: true, //ADD DESTROY TRUE
.
.
.
..

Try this,
setInterval( function () {
$("#example").DataTable().ajax.reload();
}, 5000 );

You can try this
window.setInterval(function(){
$("#TableID").DataTable().ajax.reload()
},5000);

Tabbing doesnt work for datatable

I m using jquery datatables in many pages and its working good in every page and in a single page its not working properly, i mean when i use tab to go through datatable, it works fine for the first time and when i try to do the same for second time, if i try to focus on any thing in few seconds in data table, the focus disappears and the foucs starts from the starting of the page.
Here goes the code
function tableCall(){
var clientId = $('#clientId').val();
var versionCount = $('#versionCount').val();
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
$.ajax({
url: auditTrail.props.reporttableURL,
type: "POST",
dataType: "json",
data: {
clientId:clientId,
versionCount:versionCount,
fromDate:fromDate,
toDate:toDate
},
success: function (data) {
searchJSON = data.data;
var len=searchJSON.length;
if (len > 0){
$('.no-data, #warning-sign').hide();
createTable();
}else{
$('.no-data').hide();
$('#warning-sign').show();
}
}
});
}
function createTable() {
wwhs.setADAAttrDynamic($('#auditTable'));
if ($.fn.DataTable.isDataTable('#auditTable')) {
// table.destroy();
$("#auditTable tbody").empty();
}
table = $('#auditTable').dataTable({
"searching":false,
"destroy":true,
"autoWidth": false,
"ordering": true,
"destroy":true,
"stateSave": true,
"drawCallback": attachEvents,
"stateLoadParams": function (settings, data) {
return false;
},
data: searchJSON,
columns: [{
data: "reportName"
}, {
data: "reportStatus"
}, {
data: "timeStamp"
}, {
data: "requestedBy"
}],
"columnDefs": [{
"render": function (data, type, row) {
if(row.reportStatus.toUpperCase() == 'PROCESSED')
return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
else
return row.reportName;
},
"width": "50%",
"targets": 0
}, {
"width": "15%",
"targets": 1
}, {
"width": "20%",
"targets": 2
}, {
"width": "15%",
"targets": 3
}]
});
}

I think the problem is because the datatable instance is not destroyed.
Since datatables saves all the nodes into an object and renders it when ever it wants, emptying the tbody doesnt do anything. it just removes the elements in the page which can be re-drawn/re-rendered by datatable from its stored object.
You can check if the object is already initialized and the destroy it before re-initializing.
if(typeof table != "undefined")
table.destroy();
So the final code will look something like
function tableCall(){
var clientId = $('#clientId').val();
var versionCount = $('#versionCount').val();
var fromDate = $('#fromDate').val();
var toDate = $('#toDate').val();
$.ajax({
url: auditTrail.props.reporttableURL,
type: "POST",
dataType: "json",
data: {
clientId:clientId,
versionCount:versionCount,
fromDate:fromDate,
toDate:toDate
},
success: function (data) {
searchJSON = data.data;
var len=searchJSON.length;
if (len > 0){
$('.no-data, #warning-sign').hide();
createTable();
} else {
$('.no-data').hide();
$('#warning-sign').show();
}
}
});
}
function createTable() {
wwhs.setADAAttrDynamic($('#auditTable'));
if ($.fn.DataTable.isDataTable('#auditTable')) {
if(typeof table != "undefined")
table.destroy();
}
table = $('#auditTable').dataTable({
"searching":false,
"destroy":true,
"autoWidth": false,
"ordering": true,
"destroy":true,
"stateSave": true,
"drawCallback": attachEvents,
"stateLoadParams": function (settings, data) {
return false;
},
data: searchJSON,
columns: [{
data: "reportName"
}, {
data: "reportStatus"
}, {
data: "timeStamp"
}, {
data: "requestedBy"
}],
"columnDefs": [{
"render": function (data, type, row) {
if(row.reportStatus.toUpperCase() == 'PROCESSED')
return '<a class="blue-text" " data-name="'+ row.reportName +'">' + row.reportName + '</a>';
else
return row.reportName;
},
"width": "50%",
"targets": 0
}, {
"width": "15%",
"targets": 1
}, {
"width": "20%",
"targets": 2
}, {
"width": "15%",
"targets": 3
}]
});
}