This is in the variable "test":
{"data":[{"HistChar_ID":"4","Vorname":"Garnier","Nachname":"de
Naplouse"},{"HistChar_ID":"2","Vorname":"Robert","Nachname":"de
Sable"},{"HistChar_ID":"7","Vorname":"Ibn","Nachname":"Dschubair"},{"HistChar_ID":"6","Vorname":"Baha
ad-Din","Nachname":"ibn
Schaddad"},{"HistChar_ID":"1","Vorname":"Richard","Nachname":"L\u00f6wenherz"},{"HistChar_ID":"5","Vorname":"Wilhelm","Nachname":"von
Montferrat"}]}
HTML:
<table id="example" style="width:100%">
<thead >
<tr>
<th >HistChar_ID</th>
<th >Vorname</th>
<th >Nachname</th>
</tr>
</thead>
<tfoot >
<tr>
<th >HistChar_ID</th>
<th >Vorname</th>
<th >Nachname</th>
</tr>
</tfoot>
</table>
An the following Code Wont fill the Datatable.
$('#example').DataTable({
data: test,
columns: [
{ data: 'HistChar_ID' },
{ data: 'Vorname' },
{ data: 'Nachname' },
]
it throws an Error like this:
DataTables warning: table id=example - Requested unknown parameter 'HistChar_ID' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
I tried so much. But if i take whats inside of "test" and put it into a php and use ajax it works just fine with this.
$('#example').DataTable({
ajax: 'RESOURCES/PHP/Searchfield.php',
columns: [
{ data: 'HistChar_ID' },
{ data: 'Vorname' },
{ data: 'Nachname' },
]
PHP/Searchfield
include 'connection.php';
$sql = "select * from historischercharacter"; $result =
mysqli_query($conn, $sql) or die("Error in Selecting " .
mysqli_error($conn));
$emparray = array(); while($row =mysqli_fetch_assoc($result)) {
$emparray[] = $row; }
echo json_encode(array('data'=>$emparray));
mysqli_close($conn);
Can someone explain me why? Is it impossible to fill the Datatable with a variable?? I just dont get it...
CodePudding user response：
If you look at the examples in the documentation, the hard-coded array being passed into the table doesn't have the outer data property, it's just an array by itself - see https://datatables.net/examples/data_sources/js_array.html . You can see the same thing here as well: https://datatables.net/reference/option/data
The requirements when defining an AJAX data source are different. As per the example at https://datatables.net/reference/option/ajax by default you must supply an object with a "data" property as per the structure you've shown us in your question.
So it's simply that the requirements for each type of data source are different. Always read the documentation!
Demo of how to set the data source using a variable, with your variable. Note the absence of the "data" property...instead "test" is just a plain array:
var test = [{
"HistChar_ID": "4",
"Vorname": "Garnier",
"Nachname": "de Naplouse"
}, {
"HistChar_ID": "2",
"Vorname": "Robert",
"Nachname": "de Sable"
}, {
"HistChar_ID": "7",
"Vorname": "Ibn",
"Nachname": "Dschubair"
}, {
"HistChar_ID": "6",
"Vorname": "Baha ad-Din",
"Nachname": "ibn Schaddad"
}, {
"HistChar_ID": "1",
"Vorname": "Richard",
"Nachname": "L\u00f6wenherz"
}, {
"HistChar_ID": "5",
"Vorname": "Wilhelm",
"Nachname": "von Montferrat"
}];
$('#example').DataTable({
data: test,
columns: [{
data: 'HistChar_ID'
},
{
data: 'Vorname'
},
{
data: 'Nachname'
},
]
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<table id="example" style="width:100%">
<thead >
<tr>
<th >HistChar_ID</th>
<th >Vorname</th>
<th >Nachname</th>
</tr>
</thead>
<tfoot >
<tr>
<th >HistChar_ID</th>
<th >Vorname</th>
<th >Nachname</th>
</tr>
</tfoot>
</table>CodePudding user response：
Here is an example using a JavaScript variable which does not require you to change the data you show in your question:
var test = { "data": [ { ... }, { ... }, ... ] };
In the above structure, each element in the array [ ... ] contains the data for one table row.
In this case, the DataTable uses the data option to specify where that array can be found:
data: test.data
Here is the runnable demo:
var test = {
"data": [{
"HistChar_ID": "4",
"Vorname": "Garnier",
"Nachname": "de Naplouse"
}, {
"HistChar_ID": "2",
"Vorname": "Robert",
"Nachname": "de Sable"
}, {
"HistChar_ID": "7",
"Vorname": "Ibn",
"Nachname": "Dschubair"
}, {
"HistChar_ID": "6",
"Vorname": "Baha ad-Din",
"Nachname": "ibn Schaddad"
}, {
"HistChar_ID": "1",
"Vorname": "Richard",
"Nachname": "L\u00f6wenherz"
}, {
"HistChar_ID": "5",
"Vorname": "Wilhelm",
"Nachname": "von Montferrat"
}]
};
$(document).ready(function() {
$('#example').DataTable({
data: test.data,
columns: [
{ data: 'HistChar_ID' },
{ data: 'Vorname' },
{ data: 'Nachname' },
]
} );
} );<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" style="width:100%">
<thead >
<tr>
<th >HistChar_ID</th>
<th >Vorname</th>
<th >Nachname</th>
</tr>
</thead>
<tfoot >
<tr>
<th >HistChar_ID</th>
<th >Vorname</th>
<th >Nachname</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>JavaScript Data Sources
In the above example, the data is sourced from a JavaScript variable - so at the very least you always need to tell DataTables what the name of the JS variable is, using the data option.
And, you may also need to tell DataTables where the array of row data can be found in that variable. This is what we needed to do in the above example.
If the JavaScript variable had been structured like this (an array, not an object containing an array)...
var test = [ { ... }, { ... }, ... ];
...then in that case, we only need to use data: test in the DataTable.
Ajax Data Source
For Ajax-sourced data, things are slightly different. There is no JavaScript variable - there is only a JSON response.
By default, if that JSON response has the following structure (an array of objects called "data" - or an array of arrays)...
{ "data": [ { ... }, { ... }, ... ] }
...then you do not need to provide any additional instructions for DataTables to locate the array. It uses "data" as the default value.
Otherwise if you have a different JSON structure, you need to use the Ajax dataSrc option to specify where the array is in the JSON response.
For the above example, if you do not provide the dataSrc option, that is the same as providing the following:
ajax: {
url: "your URL here",
dataSrc: "data" // this is the default value - so you do not need to provide it
}
This is why your Ajax version "just works" when you only provide the URL:
ajax: 'RESOURCES/PHP/Searchfield.php'
DataTables is using the default value of data to find the array it needs.
And this is why it doesn't work when you use a JavaScript variable called test with data: test.
So, for JavaScript-sourced data, there is no default value. You always have to provide the JavaScript variable name - and maybe additional info for the location of the array in the varaible.
But for Ajax-sourced data, there is a default value (data) - and I believe this is only provided for backwards compatibility with older versions of DataTables.