jquery-datatables - DataTables 新数据不起作用

Question

我的 HTML 文件中有一个表格：

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="../assets/data-tables/DT_bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../assets/uniform/css/uniform.default.css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body class="fixed-top">
<table id="tabela_1">
<thead>
<tr>
<th>Contacto</th>
<th>Dt Receção</th>
<th>Dt Validade</th>
<th>Refª Cliente</th>
<th>Num Proposta</th>
<th>Estado</th>            
</tr>
</thead>
<tbody id="dados_tabela">
        <tr class="">
            <td>alex</td>
            <td>Alex Nilson</td>
            <td>1234</td>
            <td class="center">power user</td>
            <td><a class="edit" href="javascript:;">Edit</a></td>
            <td><a class="delete" href="javascript:;">Delete</a></td>
        </tr>
        <tr class="">
            <td>lisa</td>
            <td>Lisa Wong</td>
            <td>434</td>
            <td class="center">new user</td>
            <td><a class="edit" href="javascript:;">Edit</a></td>
            <td><a class="delete" href="javascript:;">Delete</a></td>
        </tr>
        <tr class="">
            <td>nick12</td>
            <td>Nick Roberts</td>
            <td>232</td>
            <td class="center">power user</td>
            <td><a class="edit" href="javascript:;">Edit</a></td>
            <td><a class="delete" href="javascript:;">Delete</a></td>
        </tr>
        <tr class="">
            <td>goldweb</td>
            <td>Sergio Jackson</td>
            <td>132</td>
            <td class="center">elite user</td>
            <td><a class="edit" href="javascript:;">Edit</a></td>
            <td><a class="delete" href="javascript:;">Delete</a></td>
        </tr>
        <tr class="">
            <td>webriver</td>
            <td>Antonio Sanches</td>
            <td>462</td>
            <td class="center">new user</td>
            <td><a class="edit" href="javascript:;">Edit</a></td>
            <td><a class="delete" href="javascript:;">Delete</a></td>
        </tr>
        <tr class="">
            <td>gist124</td>
            <td>Nick Roberts</td>
            <td>62</td>
            <td class="center">new user</td>
            <td><a class="edit" href="javascript:;">Edit</a></td>
            <td><a class="delete" href="javascript:;">Delete</a></td>
        </tr>

    </tbody>

</table>

<script src="../assets/js/jquery-1.8.3.min.js"></script>    
<script src="../assets/breakpoints/breakpoints.js"></script>    
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>     
<script src="../assets/js/jquery.blockui.js"></script>
<script src="../assets/js/jquery.cookie.js"></script>
<script type="text/javascript" src="../assets/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="../assets/data-tables/jquery.dataTables.js">
</script>
<script type="text/javascript" src="../assets/data-tables/DT_bootstrap.js"></script>
<script src="../assets/js/app.js"></script>     

<script>
jQuery(document).ready(function() {         

var oTable = $('#tabela_1').dataTable({ 
"bServerSide": true,
"bRetrieve": true,
"oSearch": {"sSearch": "Initial search"},
"sAjaxSource": "x.php?id_cliente=1",
"aoColumns": [
{ "sTitle": "Nome"},
{ "sTitle": "Data"},
{ "sTitle": "d"},
{ "sTitle": "e"},
{ "sTitle": "e"},
{ "sTitle": "3"}
],
"iDisplayLength": 10,
"bRetrieve": true,
"bScrollCollapse": true
}); 
});

</script>
</body>
</html>

x.php 文件发送以下数据：

(...)
$num=1;

echo '{"iTotalRecords":'.$totalRows_rs_listaconsultas.',
"iTotalDisplayRecords":"10",
"aaData":['; 


do {
if ($num>1){
echo ",";
}
echo '["',$row_rs_listaconsultas['nome'],'",
"',$row_rs_listaconsultas['datarecepcao'],'",
"',$row_rs_listaconsultas['validadeconsulta'],'",
"',$row_rs_listaconsultas['referenciaconsulta'],'",
"',$row_rs_listaconsultas['propostanumero'],'",
"',$row_rs_listaconsultas['estado'],'"]'; 
$num=$num+1;
} while ($row_rs_listaconsultas = mysql_fetch_assoc($rs_listaconsultas));

echo ']}';

该表向我显示了来自 ("sAjaxSource": "php/x.php?id_cliente=1") 的数据。我可以看到所有数据，但排序列、搜索框和所有用于重新处理数据的命令都不起作用。似乎 dataTable 没有“看到”数据。我做错了什么？谢谢你的帮助。马里奥

score 0 · Accepted Answer

这是你需要的。我在数据表网站上使用了代码：

html应该是这样的：

<html>
<head>
    </head>
    <body>
<table border="0" cellspacing="5" cellpadding="5" id="users" class="display">
    <thead><tr><th>id</th><th>name</th></tr></thead>
    <tbody><tr><td></td></tr></tbody>
</table>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
        <script src="jquery.dataTables.min.js"
                type="text/javascript"></script>
        <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#users').dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "users.php"
            } );
        } );
        </script>
</body>
</html>

注意：我使用了一个只有两列的表，一个 id 列和一个 name 列。我的数据来自users.php文件。

该users.php文件如下所示：

<?php
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * Easy set variables
     */

    /* Array of database columns which should be read and sent back to DataTables. Use a space where
     * you want to insert a non-database field (for example a counter or static image)
     */
    $aColumns = array( 'id', 'name');

    /* Indexed column (used for fast and accurate table cardinality) */
    $sIndexColumn = "id";

    /* DB table to use */
    $sTable = "users";

    /* Database connection information */
    $gaSql['user']       = "";
    $gaSql['password']   = "";
    $gaSql['db']         = "";
    $gaSql['server']     = "";

    /* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
    //include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );


    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * If you just want to use the basic configuration for DataTables with PHP server-side, there is
     * no need to edit below this line
     */

    /* 
     * Local functions
     */
    function fatal_error ( $sErrorMessage = '' )
    {
        header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
        die( $sErrorMessage );
    }


    /* 
     * MySQL connection
     */
    if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
    {
        fatal_error( 'Could not open connection to server' );
    }

    if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
    {
        fatal_error( 'Could not select database ' );
    }


    /* 
     * Paging
     */
    $sLimit = "";
    if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
    {
        $sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
            intval( $_GET['iDisplayLength'] );
    }


    /*
     * Ordering
     */
    $sOrder = "";
    if ( isset( $_GET['iSortCol_0'] ) )
    {
        $sOrder = "ORDER BY  ";
        for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
        {
            if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
            {
                $sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
                    ($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
            }
        }

        $sOrder = substr_replace( $sOrder, "", -2 );
        if ( $sOrder == "ORDER BY" )
        {
            $sOrder = "";
        }
    }


    /* 
     * Filtering
     * NOTE this does not match the built-in DataTables filtering which does it
     * word by word on any field. It's possible to do here, but concerned about efficiency
     * on very large tables, and MySQL's regex functionality is very limited
     */
    $sWhere = "";
    if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
    {
        $sWhere = "WHERE (";
        for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            $sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
        }
        $sWhere = substr_replace( $sWhere, "", -3 );
        $sWhere .= ')';
    }

    /* Individual column filtering */
    for ( $i=0 ; $i<count($aColumns) ; $i++ )
    {
        if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
        {
            if ( $sWhere == "" )
            {
                $sWhere = "WHERE ";
            }
            else
            {
                $sWhere .= " AND ";
            }
            $sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
        }
    }


    /*
     * SQL queries
     * Get data to display
     */
    $sQuery = "
        SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
        FROM   $sTable
        $sWhere
        $sOrder
        $sLimit
        ";
    $rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );

    /* Data set length after filtering */
    $sQuery = "
        SELECT FOUND_ROWS()
    ";
    $rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
    $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
    $iFilteredTotal = $aResultFilterTotal[0];

    /* Total data set length */
    $sQuery = "
        SELECT COUNT(`".$sIndexColumn."`)
        FROM   $sTable
    ";
    $rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
    $aResultTotal = mysql_fetch_array($rResultTotal);
    $iTotal = $aResultTotal[0];


    /*
     * Output
     */
    $output = array(
        "sEcho" => intval($_GET['sEcho']),
        "iTotalRecords" => $iTotal,
        "iTotalDisplayRecords" => $iFilteredTotal,
        "aaData" => array()
    );

    while ( $aRow = mysql_fetch_array( $rResult ) )
    {
        $row = array();
        for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            if ( $aColumns[$i] == "version" )
            {
                /* Special output formatting for 'version' column */
                $row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
            }
            else if ( $aColumns[$i] != ' ' )
            {
                /* General output */
                $row[] = $aRow[ $aColumns[$i] ];
            }
        }
        $output['aaData'][] = $row;
    }

    echo json_encode( $output );
?>

更改这些变量：

$aColumns = array( 'id', 'name');//表中的字段
$sIndexColumn = "id";//索引列
$sTable = "users";//表名
必要的连接变量：

$gaSql['user'] = ""; $gaSql['密码'] = ""; $gaSql['db'] = ""; $gaSql['server'] = "";

这对我有用。

jquery-datatables - DataTables 新数据不起作用

1 回答 1

Related

Reference