Question

这是我第一次尝试使用jQuery数据表。

我正在尝试使用jquery datatables从php填充html表中的数据。

以下代码停留在Loading data from server。

任何想法我需要做出哪些改变才能使其发挥作用？

    <link rel="stylesheet" type="text/css" href="css/header.css">
<div id="container">
<div style="width:680px">
<table id="tbDetails" cellpadding="0" cellspacing="0"  id="example">
<thead style="background-color:#DC5807; color:White; font-weight:bold;font-size:10pt;">
<tr style="border:solid 1px #000000">
    <th width="5%">ID</th>
    <th width="10%">Date</th>
    <th width="10%">Request Status</th>
    <th width="15%">Requestor FullName</th>
    <th width="15%">Requestor WorkPhone</th>
    <th width="15%">Requestor Email</th>
    <th width="15%">Primary SiteContact</th>
    <th width="15%">Secondary SiteContact</th>
  </tr>
 </thead>
<tbody>
    <tr>
        <td colspan="8" class="dataTables_empty">Loading data from server</td>
    </tr>
</tbody>

 </table>
 </div>
  <div class="spacer"></div>
 </div>
         <style type="text/css">
         @import "jquery/dataTables/media/css/jquery-ui.css";
         @import "jquery/datatables/media/css/demo_table.css";
         td{padding-right:30px;}
         .row_selected{color: gray;}
         </style>
 <script type="text/javascript">
 $(document).ready(function() {
     var what = "customer";
     /* Init DataTables */
     var oTable = $('#example).dataTable({
         "bJQueryUI" : true,
         //"bProcessing" : true,
         "bServerSide" : true,
         "sPaginationType" : "RequestID",
         "sAjaxSource" : "filltable.php",

         "aoColumns" : [{
             "sClass" : "center",
             "bSortable" : false,
         }, {
             "sName" : "RequestID",
             "mData" : "2"
         }, {
             "sName" : "RequestDate",
             "mData" : "3"
         }, {
             "sName" : "RequestStatus",
             "mData" : "4"
         }, {
             "sName" : "RequestorFullName",
             "mData" : "5"
         }, {
             "sName" : "RequestorWorkPhone",
             "mData" : "6"
         }, {
             "sName" : "RequestorEmail",
             "mData" : "7"
         }, {
             "sName" : "PrimarySiteContactDisplay",
             "mData" : "8"
         }, {
             "sName" : "SecondarySiteContactDisplay",
             "mData" : "9"
         }],
         "aaSorting" : [[1, 'RequestDescription']]
     })
 });
</script>

非常感谢提前

出于某种原因，也许我的浏览器已经过时了，不再允许我点击Add commnt。

无论如何，感谢你指出这一点。我不知道为什么它在我的帖子后消失了。

我的代码有刻度线。

毋庸置疑，这不是问题。

爱德华多，请原谅我。出于某种原因，就在今天，这不允许我添加评论。

所以，我在这里做。也不是老浏览器。

我认为我这样做的方式应该可行。

所以，我真的不确定问题是什么。

我会尝试改变你的建议，但不确定这是解决方案。

Answer 1

你错过了这一行的结束语 -

var oTable = $('#example).dataTable({

应该是 -

var oTable = $('#example').dataTable({

Answer 2

您需要以特定格式返回服务器的响应，如果报价丢失，如@Jay Blanchard说它不起作用。但如果它是一个错字，可能是你从PHP脚本发回的响应

"sAjaxSource" : "filltable.php"

不正确，请查看文档

Server side processing Datatables

同样在aaSoring中，您需要指定列索引，然后指定所需的顺序

[[1, 'desc']]
[[1, 'asc']]

我没有意识到您正在使用mData将列映射到我的错误的JSON属性，如果您尝试使列与JSON对象上的数据索引匹配，则需要设置整数它会尝试寻找像这样的东西

{"2":"Your val"}

使用整数设置mData将查找索引，这可能就是它停止从服务器步骤加载数据的原因。

http://datatables.net/ref#mData

JQuery数据表未将数据加载到表中。有任何想法吗？

2 个答案: