Javascript jTable不显示
我正在尝试建立一个包括jQuery和jTable的网站。因此,我一直在尝试使用网站提供的示例jTable脚本,但我似乎无法获得任何返回的输入。文件路径都正常工作,我检查以确保jQuery已加载(已加载)。我真的不知道我做错了什么,如果有的话。谢谢 jTable文件:Javascript jTable不显示,javascript,jquery,html,jquery-jtable,Javascript,Jquery,Html,Jquery Jtable,我正在尝试建立一个包括jQuery和jTable的网站。因此,我一直在尝试使用网站提供的示例jTable脚本,但我似乎无法获得任何返回的输入。文件路径都正常工作,我检查以确保jQuery已加载(已加载)。我真的不知道我做错了什么,如果有的话。谢谢 jTable文件: <html> <head> <link href="JQueryUI/css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type=
<html>
<head>
<link href="JQueryUI/css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<link href="jtable/themes/standard/blue/jtable_blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jtable/jquery.jtable.js"></script>
</head>
<title>Under Construction</title>
Hello World
<div id="PersonTableContainer"></div>
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: 'PersonList.php'
createAction: 'CreatePerson.php'
updateAction: 'UpdatePerson.php'
deleteAction: 'DeletePerson.php'
},
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
}
});
$('#PersonTableContainer').jtable('load');
});
在建工程
你好,世界
$(文档).ready(函数(){
$(“#PersonTableContainer”).jtable({
标题:"人表",,
行动:{
listAction:'PersonList.php'
createAction:'CreatePerson.php'
updateAction:'UpdatePerson.php'
deleteAction:'DeletePerson.php'
},
字段:{
人物:{
关键:没错,
创建:false,
编辑:false,
列表:false
},
姓名:{
标题:“作者姓名”,
宽度:“40%”
},
年龄:{
标题:"年龄",,
宽度:“20%”
},
记录日期:{
标题:“记录日期”,
宽度:“30%”,
键入:“日期”,
创建:false,
编辑:false
}
}
});
$('PersonTableContainer').jtable('load');
});
PersonList.php
<?php
$link = new mysqli("localhost", "user", "pass", "people");
$query = "SELECT * FROM people";
$results = mysqli_query($link, $query);
$rows = array();
while($row = mysqli_fetch_assoc($results))
{
$rows[] = $row;
}
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Records'] = $rows;
print json_encode($jTableResult);
}
?>
PersonList.php在终端中返回正确的输出,它似乎没有在网站/jTable中显示任何内容。请尝试下面的内容,让我知道它是否有效,我对它没有太多经验,但如果您需要,我甚至为它创建了自定义搜索功能 我只使用一个actions文件,但我使用$\u REQUEST,而不是像您一样使用不同的文件
//Get records from database
$result = mysql_query("SELECT * FROM people;");
//Add all records to an array
$rows = array();
while($row = mysql_fetch_array($result))
{
$rows[] = $row;
}
//Return result to jTable
$jTableResult = array();
$jTableResult['Result'] = "OK";
$jTableResult['Records'] = $rows;
print json_encode($jTableResult);
要调试这个,我将从三个角度开始: 1.看看开发人员工具中的AJAX响应。在网络选项卡上的Chrome中,按XHR过滤。首先验证是否正在进行AJAX调用,并查看响应。 2.验证AJAX响应是否进入jtable上下文。只需在“字段”属性下添加以下行:
fields: {
...
},
recordsLoaded: function(event, data) {
console.log(data);
}
三,。在浏览器控制台中展开此console.log对象并查看数组项。jtable区分大小写,因此生成的参数必须具有相同的拼写和大小写。通常很容易更改jtable描述中的字段名以匹配db字段名。您能通过控制台确认AJAX请求是否成功完成吗?@Colin-我不确定我是否理解您的要求。我怎么确认呢?我对jTable不太熟悉,但我认为它会向您的.php文件发出AJAX请求。要检查的一件事是,你从那次通话中得到了预期的结果。浏览器的控制台应该有一个“网络”(或类似的东西)选项卡,在发出AJAX请求时显示该请求。您可以检查发送了哪些参数,当然还可以检查返回了哪些数据(如果有的话)。最好确认那里的一切都正常工作。