用变量填充数据表不工作.但如果我把完全相同的值php网站和请求它与ajax.它的工作原理.为什么? &

这是在变量"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":"Lu00f6wenherz"},{"HistChar_ID":"5","Vorname":"Wilhelm","Nachname":"von
Montferrat"}]}

HTML:

<table id="example" class="display" style="width:100%">
<thead class="thead1">
<tr>
<th class="th1">HistChar_ID</th>
<th class="th2">Vorname</th>
<th class="th3">Nachname</th>
</tr>
</thead>
<tfoot class="tfoot1">
<tr>
<th class="th1">HistChar_ID</th>
<th class="th2">Vorname</th>
<th class="th3">Nachname</th>
</tr>
</tfoot>
</table>

下面的代码不能填充数据表

$('#example').DataTable({       
data: test, 
columns: [
{ data: 'HistChar_ID'  },
{ data: 'Vorname' },
{ data: 'Nachname' },
]

会抛出如下错误:

datatable warning: table id=example -请求的未知参数'HistChar_ID'为第0行，第0列。了解更多相关信息错误，请参见http://datatables.net/tn/4

我已经尽力了。但是如果我取"test"然后把它放到PHP中，使用ajax，这样就可以了

$('#example').DataTable({
ajax: 'RESOURCES/PHP/Searchfield.php',
columns: [
{ data: 'HistChar_ID' },
{ data: 'Vorname' },
{ data: 'Nachname' },
]

PHP/Searchfield

include 'connection.php';
$searchstuff = $_GET['Searchfield'];
$sql = "select * FROM historischercharacter WHERE Vorname LIKE '%$searchstuff%' OR Nachname LIKE '%$searchstuff%' ORDER BY Nachname" ;
$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);

谁能给我解释一下为什么?是不可能填充的数据表与一个变量??我只是不明白…

如果您查看文档中的示例，传入表的硬编码数组没有外部data属性，它本身只是一个数组-请参阅https://datatables.net/examples/data_sources/js_array.html。在这里也可以看到相同的内容:https://datatables.net/reference/option/data

定义AJAX数据源时的需求是不同的。按照https://datatables.net/reference/option/ajax的例子，默认情况下，您必须提供一个带有"data"的对象。

所以很简单，每种类型的数据源的需求是不同的。一定要阅读文档!

演示如何使用变量设置数据源，使用变量。注意这里没有"数据"。财产……而不是"test"只是一个普通数组:

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": "Lu00f6wenherz"
}, {
"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" class="display" style="width:100%">
<thead class="thead1">
<tr>
<th class="th1">HistChar_ID</th>
<th class="th2">Vorname</th>
<th class="th3">Nachname</th>
</tr>
</thead>
<tfoot class="tfoot1">
<tr>
<th class="th1">HistChar_ID</th>
<th class="th2">Vorname</th>
<th class="th3">Nachname</th>
</tr>
</tfoot>
</table>

下面是一个使用JavaScript变量的例子，它不需要您更改您在问题中显示的数据:

var test = { "data": [ { ... }, { ... }, ... ] };

在上面的结构中，数组[ ... ]中的每个元素包含一个表行的数据。

在这种情况下，DataTable使用data选项来指定数组的位置:

data: test.data

下面是可运行的演示:

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": "Lu00f6wenherz"
}, {
"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" class="display" style="width:100%">
<thead class="thead1">
<tr>
<th class="th1">HistChar_ID</th>
<th class="th2">Vorname</th>
<th class="th3">Nachname</th>
</tr>
</thead>
<tfoot class="tfoot1">
<tr>
<th class="th1">HistChar_ID</th>
<th class="th2">Vorname</th>
<th class="th3">Nachname</th>
</tr>
</tfoot>
</table>

</div>

</body>
</html>

JavaScript数据源

在上面的例子中，数据来自一个JavaScript变量-所以至少你总是需要告诉DataTables JS变量的名称是什么，使用data选项。

并且，您可能还需要告诉DataTables在该变量中可以找到行数据数组的位置。这就是我们在上面的例子中需要做的。

如果JavaScript变量的结构是这样的(一个数组，而不是一个包含数组的对象)…

var test = [ { ... }, { ... }, ... ];

…在这种情况下，我们只需要在DataTable中使用data: test。

Ajax数据源

对于ajax源数据，情况略有不同。没有JavaScript变量，只有JSON响应。

默认情况下，如果JSON响应具有以下结构(称为"data"的对象数组-或数组的数组)…

{ "data": [ { ... }, { ... }, ... ] }

…那么就不需要为DataTables提供任何额外的指令来定位数组。它使用"data"作为默认值。

否则，如果您有一个不同的JSON结构，您需要使用AjaxdataSrc选项来指定数组在JSON响应中的位置。

对于上面的示例，如果不提供dataSrc选项，则与提供以下内容相同:

ajax: {
url: "your URL here",
dataSrc: "data" // this is the default value - so you do not need to provide it
}

这就是为什么你的Ajax版本"刚刚好"。当您只提供URL:

时

ajax: 'RESOURCES/PHP/Searchfield.php'

DataTables使用默认值data来查找它需要的数组。

这就是为什么当你使用一个名为test和data: test的JavaScript变量时它不起作用。

所以，对于javascript来源的数据，没有默认值。您总是需要提供JavaScript变量名—也许还需要提供变量中数组位置的附加信息。

但是对于ajax来源的数据，有一个默认值(data) -我相信这只是为了向后兼容旧版本的数据表而提供的。

相关内容

最新更新

热门标签：