jquery数据表设置

时间:2013-02-23 13:07:06

标签: jquery datatables

我正在尝试设置jquery datatables插件,但是,我已经进入了一堵砖墙。以下是我到目前为止所处的位置...... 我创建了一个名为“testtable.php”的页面,以下是它的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cloudone Chart Of Accounts</title>

<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>

<script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "server_processing.php"


    } );
} );

        </script>
        <link href="css/demo_table.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="101%" border="0" class="display" id="example">
<thead>
  <tr>
    <th width="32%" scope="col">Rendering Engine;</th>
    <th width="28%" scope="col">&nbsp;</th>
    <th width="10%" scope="col">&nbsp;</th>
    <th width="10%" scope="col">&nbsp;</th>
    <th width="10%" scope="col">&nbsp;</th>
    <th width="10%" scope="col">&nbsp;</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>engine</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </tbody>
</table>

</body>
</html>

使用datatables.net提供的示例我创建了一个名为“server_processing.php”的第二个页面,填写了所需的连接设置,并在测试服务器上添加了“testtable.php”。 我正在使用datatables.net概述的基本配置,只是为了让事情正常运行所以我可以玩一下来熟悉工作。这是我难倒的地方,我无法让页面呈现结果。我怀疑在连接中省略了某些内容以及定义变量以显示在显示页面“testtable.php”中的过程。

任何人都可以指出它在哪里我误入歧途或参考jquery数据表服务器端处理的一步一步设置示例。

感谢的         大卫

1 个答案:

答案 0 :(得分:0)

让您在没有服务器端处理的情况下开始使用(如果您没有太多的行应该没问题)

创建你的html页面,就像现在用你的数据填充表格一样

这样:

<table width="101%" border="0" class="display" id="example">
    <thead>
        <tr>
            <th width="32%" scope="col">Rendering Engine;</th>
            <th width="28%" scope="col">&nbsp;</th>
            <th width="10%" scope="col">&nbsp;</th>
            <th width="10%" scope="col">&nbsp;</th>
            <th width="10%" scope="col">&nbsp;</th>
            <th width="10%" scope="col">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>engine</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>engine1</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>engine1</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

然后简单地初始化数据表而没有任何选项。

请参阅此示例以获取实时示例:http://jsfiddle.net/V97jd/