Ajax options not working - two errors
Ajax options not working - two errors
crash85
Posts: 48Questions: 5Answers: 0
Error 1: DataTables warning: table id=samples - Requested unknown parameter '1' for row 0, column 2. For more information about this error, please see http://datatables.net/tn/4
Error 2: DataTables warning: table id=samples - Requested unknown parameter '2' for row 0, column 3. For more information about this error, please see http://datatables.net/tn/4
I've been struggling to get some of the sorting features I want implemented. I think it has something to do with the way SSP::simple returns the data and how I use it after. So I now have a php that echose a json with my data. And then I try to load it in using ajax. But something is causing these errors. (Developer tools shows the json data coming back to the script correctly,)
If I manually put the data into the JS as a var, it will work. But setting a var as getJSON, or using the ajax call fails.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/datatables.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" media="screen" />
<script charset="utf8" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script charset="utf8" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
</head>
</html>
<body>
<div class="container">
<table id="samples" class="display nowrap compact hover dt-left" width="100%"></table>
</table>
</form>
<script type="text/javascript" charset="utf8" src="JS/datatables.js"></script>
</body>
JS
$(document).ready(function () {
var dataTable = $('#samples').DataTable({
'processing': true,
'serverSide': false,
'pageLength': -1,
'lengthMenu': [
[100, 250, 500, -1],
[100, 250, 500, 'All']
],
ajax: {
"url": "http://server.com/json.php",
"dataSrc": ""
},
columns: [
{
data: '0',
defaultContent: '0',
visible: false
},
{
data: '',
defaultContent: '',
orderable: false,
className: 'select-checkbox',
targets: 1,
orderData: [0]
},
{
title: 'ID',
'className': 'dt-left',
"visible": false,
data: 1
},
{
title: 'Name',
'className': 'dt-left',
data: 2
},
{
title: 'Region/Program',
'className': 'dt-left',
data: 3
},
{
title: 'Class',
'className': 'dt-left',
data: 4
},
{
title: 'Category',
'className': 'dt-left',
data: 5
},
{
title: 'QC Concerns',
'className': 'dt-left',
data: 7
}
],
select: {
style: 'multi',
},
order: ([
[4, 'asc'],
[5, 'asc'],
[3, 'asc']
]),
orderFixed: [0, 'desc'],
dom: 'Bfrtip',
buttons: [{
extend: 'csv',
fieldBoundary: '',
text: '<span class="fa fa-file-excel-o"></span> Download (ALL) or (SELECTED)',
exportOptions: {
columns: [5, 2],
modifier: {
search: 'applied',
order: 'applied'
}
}
},
{
text: 'Use Selected Library',
action: function (e, dt, node, config) {
alert('This buton needs to pass the Sample Name and Category columns to php.');
}
},
{
text: 'Upload Predefined Library',
action: function (e, dt, node, conf) {
alert('This button needs to allow a csv file to be uploaded and passed to php.');
}
},
{
text: 'Select Default Library 1',
action: function (e, dt, node, conf) {
alert('This button will automatically check all rows that match predefined list 1 using the hidden ID column.');
}
},
{
text: 'Select Default Library 2',
action: function (e, dt, node, conf) {
alert('This button will automatically check all rows that match predefined list 2 using the hidden ID column.');
}
}
]
});
//grab all the unique sorted data entries from the necessary row
var category = dataTable.column(4).data().unique().sort();
//Drop down menu stop event propagation
$('#samples').on('click', 'tbody td select',
event => event.stopPropagation());
//Write dropdown value into table
var writeCell = dropdown => {
var currentRow = dataTable.row(dropdown.closest('tr'));
var rowData = currentRow.data();
rowData.category = dropdown.val();
currentRow.remove();
dataTable.row.add(rowData).draw();
};
dataTable.on('select', function (e, dt, type) {
if (type === 'row') {
var row = dataTable.row(dt);
$(row.node()).find('td:eq(4)').html(
'<select>' + category.reduce((options, item) =>
options += `<option value="${item}" ${
item == row.data().category ? 'selected' : ''}>${
item}</option>`, '') + '</select>'
);
toggleDataAndDraw(row, type, '1');
}
});
dataTable.on('deselect', function (e, dt, type) {
if (type === 'row') {
var row = dataTable.row(dt);
writeCell($(row.node()).find('select'));
toggleDataAndDraw(row, type, '0');
}
});
var toggleDataAndDraw = (row, type, dataVal) => {
if (type === 'row') {
dataTable.cell({
row: row.index(),
column: 0
}).data(dataVal);
dataTable.draw();
}
};
});
JSON (partial)
[
{
"ID": "1",
"Name": "01_p11017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "2",
"Name": "02_p21017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "3",
"Name": "03_p31017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "4",
"Name": "04_p41017",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
},
{
"ID": "5",
"Name": "05_p11117",
"Region": "GoM",
"Class": "unknown",
"Category": "unknown",
"QC_flag": "0",
"QC_comment": "\r"
}
]
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Hi @crash85 ,
I suspect the problem is just your
columns.data- you're returning an object, so you should be referencing the element, for example something like this.Hopefully, that will get you going, if not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Yep, that was the problem with loading the data that way. Unfortunately it didn;t fix the underlying issue like I had hoped.
The problem with showing a test case, is that I don't know anywhere that has a place that I can replicate my problem. If I manually put my json in like:
The script works as intended. But the moment i change from "data" to "ajax" I lose the ability of the dropdown to populate
So something is happening when using ajax that I can't figure out, and demos wont show it. This happens weather I use my own php to generate the json, or if I use the datatables pre-canned php.
Ajax is asynchronous meaning your script will continue while the ajax request is processing. Your code to build the drop down lists is executed before the ajax response. Move that code into
initCompleteso it will execute after the ajax data has been loaded.Kevin
OOOH, that makes sense!!
I've attempted this below. The alert pops up, but the dropdown is still empty. SInce the dropdown is created outside of the datatables portion, I wasn't sure if there was another way you meant for this to be done.
I'm a bit confused by your code but I think you will want to add this to initComplete:
This will allow you to populate the
categoryvariable once the Datatable is complete. Then you callwriteCellwhich usescategoryto populate the DDL on certain events. You will need to declarecategoryglobally.Your writeCell looks like this:
Instead of deleting and re-adding the updated row you could just update the row data by replacing the last two lines with this, I believe:
Would be more efficient.
Kevin
Got it!! i placed all of my post datatables scripts into a function, and then called that function through initComplete. Thank you!
Looks like we were answering at the same time. I'll start working on your last comment. Thank you for the help! I've been fighting this ajax thing this whole time!
I have declared category globally and changed the two lines as you suggested. I will post a follow on question in a new thread. Thank you for helping me get the ajax load figured out. I've been chasing my tail trying to understand what was happening!