We Keep Coding

DataTables Reload

Well, I'm trying to do something for the job, where I need a Table made with the DataTables library to be constantly updating, for example, every 10 seconds.
I'm facing very boring problems, what I'm trying to do is give a Reload on API, as described on the official website here: https://datatables.net/reference/api/ajax.reload()
I'm using this:
function AutoReload1()
{
var table = $('#OperationFix').DataTable({
ajax: "data.json"
});
setInterval(function () {
table.ajax.reload();
}, 5000);
//loadOrdersFix();
//alert('Testing')
}
Then it returns the following error to me:
DataTables warning: table id=OperationFix - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Your code seems to be fine.
But error which you mentioned occurs when AutoReload1(); is called again somehow after its already loaded.
To resolve that you need to either add destroy: true or find out why AutoReload1() is called multiple times.
function AutoReload1()
{
var table = $('#OperationFix').DataTable({
ajax: "data.json",
destroy: true
});
setInterval(function () {
table.ajax.reload();
}, 5000);
}
Working Fiddle
Edit 1:
As per your fiddle, you have defined Datatable 2 places so add destroy:true on both place
var table = $(OperationFixTableId).DataTable({
dom: 'Bfrtip',
pageLength: 1000,
columns: columns,
data: OperationFix,
destroy: true

HTML:
<div class="container">
<table id="OperationFix" class="display" width="100%">
<tfoot>
<tr>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
<th style="text-align:right"></th>
</tr>
</tfoot>
</table>
</div>
JS:
var OperationFixTableId = $('#OperationFix');
var refreshIntervalId = setInterval;
function AutoReload1()
{
var OperationFixTableId = $('#OperationFix').DataTable({
ajax: 'data.json',
destroy: true
});
setInterval(function () {
OperationFixTableId.ajax.reload();
}, 5000);
}
function AutoReload() {
var checkbox = document.getElementById('myonoffswitch');
if (checkbox.checked == true)
{
AutoReload1();
}
if (checkbox.checked == false)
{
clearInterval(refreshIntervalId);
}
}
I'm currently trying to do this, but when I test it I see that he tries to load my DataTable with 'data.json' what I'd like him to do is load it with what he has in the bank as I could do this, my connection is here:
function GetOrdersFix(startDate, endDate, status, type, onSuccess, onError) {
var uri = executionContext.settings.GetOrdersFix;
var data = {
startDate: new Date(startDate).toJSON(),
endDate: new Date(endDate).toJSON()
};
if (status) { data.status = status; }
if (type) { data.type = type; }
console.info('Loading orders fix from ' + uri);
//Call to server API
$.ajax({
type: 'GET',
url: uri,
data: data,
success: function (responseData, status, jqXHR) {
onSuccess(responseData);
},
error: function (jqXHR, status, errorThrown) {
onError(status + ',' + errorThrown + ',' + jqXHR.responseText);
}
});
}

DataTables.js Requested unknown parameter when adding row

I have a predefined datatable on my page that is populating from data with an ajax call. After these values are on the page the user needs an ability to add rows by clicking a button, kind of like an audit log. However, every time I go to add a row I get the error
"DataTables warning: table id=DataTables_Table_0 - Requested unknown
parameter 'data1' for row 2, column 0."
I have been up and down the internet and cannot figure this out. Help please.
I have the table variable defined globally so everyone has access to it
var escalationTable;
and then a function that calls my ajax to populate said table.
function populateTable(var1, var2, var3, var4, var5, var6, var7) {
$.ajax({
dataType: 'json',
//data: id,
type: 'GET',
async: false,
url: baseUrl + 'rest/partUrl/action?var1=' + var1 + '&var2=' + var2 + '&var3=' + var3 + '&var4=' + var4,
success: function (data) {
if (data) {
escalationTable = $('.escalationTable').DataTable({
data: data,
columns: [
{
data: "data1" ? "data1" : null
},
{
data: "data2" ? "data2" : null
}, {
data: "data3" ? "data3" : null
}
],
bSort: false
});
}
},
error: function (request, status, error) {
showErrorMessage(request);
}
});
}
html
<table class="table escalationTable col-md-12" style="width:100%;">
<thead>
<tr>
<th name='esId' scope="col">#</th>
<th name='esUser' scope="col">User</th>
<th name='esDate' scope="col">Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
and then my click looks like this
$('.assignToSelf').on('click', function () {
var rowNode = escalationTable
.row.add({
"esId": 'ffffff',
"esUser": 'dfsdfsdf',
"esDate": 'fffff'
})
.draw(false)
.node();
})

The answer to this question would be naming the fields in the add the same as the data that is going into the field. Not based on the name of the field.
$('.assignToSelf').on('click', function () {
var rowNode = escalationTable
.row.add({
"data1": 'ffffff',
"data2": 'dfsdfsdf',
"data3": 'fffff'
})
.draw(false)
.node();
})

Jquery Datatable filter duplicate rows

$(document).ready(function () {
var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'paging': false,
'bFilter': false,
'ajax': {
type: 'POST',
'url': url,
'data': function (d) {
return JSON.stringify( d );
}
}
});
table.column( 3 ).data().unique();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
</table>
I am trying to use datatable unique function but I am unable to execute it. Actually I want to remove the duplicate data I am using dynamic ajax data.
table
.column( 3 )
.data()
.unique();
Like in this example I want to filter out the cities, Kindly suggest me what I am doing wrong and is there any other way, I couldnt found any other answers in stackoverflow or may be unable to understand. I am using version 1.10.9

Take notice of the actual purpose of unique :
Create a new API instance containing only the unique items from a the
elements in an instance's result set.
Unique returns a filtered set of unique items, it does not filter the rows shown in the table. Since you want to show rows where duplicated data is removed I will suggest you filter out the duplicates in the dataSrc callback. You do not provide details about the JSON, but here is an example with one of the "canonical" JSON datasets, where duplicated offices is filtered out. It simply uses javascripts Array.filter on the returned data array :
var table = $('#example').DataTable({
ajax: {
url: 'https://api.myjson.com/bins/avxod',
dataSrc: function(json) {
var offices = [];
return json.data.filter(function(item) {
if (!~offices.indexOf(item.office)) {
offices.push(item.office);
return item;
}
})
}
},
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'salary' }
]
})
demo -> http://jsfiddle.net/cbcqdj7h/

Execute unique there just return nothing.
If you just want get a unique data after you get real data.
var table = $('#example').DataTable({
...,
drawCallback:function(){
var a = table.column( 3 ).data().unique();
console.log(a);
}
})
If you want filter data without the same value.
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'paging': false,
'bFilter': false,
'ajax': {
type: 'POST',
'url': url,
'data': function (d) {
// TODO do some thing here to filter value
return JSON.stringify( d );
}
}
});
And DataTable doc https://datatables.net/reference/option/ajax

I want to use a php file for initial load only of jquery datatables

I am new to jQuery DataTables (datatables.net) I do not want to configure for serverside loading, but do want to use a php file to initally load the table.
Here is my html file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').DataTable( {
ajax: {
url: 'php/Data.php',
dataSrc: 'transactions'
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
<title>NCompass Failed Fax Monitor</title>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
The above code Returns zero rows. However if i run the php directly and paste the output in a text file, like the below code (notice different url) I get the desired result. I am pretty sure that datatables is attempting to read my php file as data rather than running it, but I don't know how to fix it.
$('#faxList').DataTable( {
ajax: {
url: 'php/Data.php',
dataSrc: 'transactions'
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});

Ng-table not calling get data

I've got implemented ng-table with an ajax call but never call the function from getdata, the function onBuscarTable is never call, I've look at the debbugger console to check it and dosen't call it:
what i'm doing whrong?
here's the js:
$scope.onBuscarTable = function ($defer, params) {
$.ajax({
type: 'GET',
url: '/Home/GetEfficiencyDetails',
cache: false,
contentType: 'application/json; charset=utf-8',
//data: JSON.stringify({ title: "fghfdhgfdgfd" }),
success: function (data) {
$scope.items = data;
$defer.resolve(data);
}
});
};
//$scope.getEffiencyDetails();
$scope.tableBuscar = new ngTableParams({
page: 1, // show first page
count: $scope.items.length, // hides pager
sorting: {
name: 'asc' // initial sorting
}
}, {
counts: [], // hides page sizes
getData: $scope.onBuscarTable
});
$scope.tableBuscar.reload();
and here is the html:
<table ng-table="tableBuscar" show-filter="true" class="table table-striped table-bordered table-condensed table-hover">
<tbody>
<tr>
<th colspan="5">Battery Life</th>
<th colspan="4">SBC</th>
<th colspan="3">ZBC</th>
<th>Overall</th>
</tr>
<tr>
<th>Pool #</th>
<th>True Cap.</th>
<th>Util.</th>
<th>Load Sharing</th>
</tr>
<tr ng-repeat="item in items">
<td>{{item.PoolName}}</td>
<td>{{item.AvgTrueCapacity}}</td>
<td>{{item.AvgEnergyUsageDaily}}</td>
</tr>
</tbody>
</table>

You code should using $http instead of $.ajax
$scope.items = [];
$scope.onBuscarTable = function($defer, params) {
$http.get('/Home/GetEfficiencyDetails').success(function(data) {
$scope.items = data;
$defer.resolve(data);
});
};
//$scope.getEffiencyDetails();
$scope.tableBuscar = new ngTableParams({
page: 1, // show first page
count: $scope.items.length, // hides pager
sorting: {
name: 'asc' // initial sorting
}
}, {
counts: [], // hides page sizes
getData: $scope.onBuscarTable
});
$scope.tableBuscar.reload();