Question

这就是我想要完成的事情：使用数据表我想显示从数据库中提取的一些信息，之后，使用DataTables隐藏的行详细信息我想显示其余的信息。第一部分完成并且工作完美，但是我没有在第二部分取得任何成功。

这是返回json代码的PHP代码（我相信它工作正常）：

<?php

        try {
            $conn = require_once 'dbConnect.php';

            $sql = "SELECT email, lastName, firstName, dateRegistered, state FROM Users";

            $result = $conn->prepare($sql) or die ($sql);

            if(!$result->execute()) return false;

            if($result->rowCount() > 0) {
                $json = array();
                while($row = $result->fetch()){
                    $json[] = array(
                        'email' => $row['email'],
                        'lastName' => $row['lastName'],
                        'firstName' => $row['firstName'],
                        'dateRegistered' => $row['dateRegistered'],
                        'state' => $row['state']
                    );
                }

                $response = array(
                    "iTotalRecords" => strval(count($json)),
                    "iTotalDisplayRecords" => strval(count($json)),
                    "aaData" => $json
                );

                echo json_encode($response);

            }
        } catch(PDOException $e) {
            echo 'Error: ' . $e->getMessage();
        }

?>

在我的数据表中，我想显示所有信息，但显示状态，这将隐藏。

/*
 * Created by: Sebastian Bonilla
 * Date: 12-12-2013
 * Version: 0.9
 */


/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
    // Creates the details block
    var aData = oTable.fnGetData( nTr );
    var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
// I tried to access states with aData[5] but it didn't work. With any value it says 'undefined'
    sOut += '<tr><td>State:</td><td>' + aData[5] + '</td></tr>';
    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
    sOut += '</table>';

    // return a html formatted string with the data to display
    return sOut;
}

$(document).ready(function() {

    /*
    $('#datatables').dataTable( {
        "bProcessing": true,
        "sAjaxSource": 'process.php'
    } );
    */

    // Create object oTable which is a datatable
    // makes an ajax call to process.php and populate the headers
    var oTable = $('#datatables').dataTable( {
        "aaSorting": [[2, 'asc']],
        "bProcessing": true,
        "bServerSide": true,
        "sPaginationType": "full_numbers",
        "sAjaxSource": "process.php",
        "aoColumns": [
            {
                "mData": null,
                "aTargets": [0],
                "bSerchable": false,
                "bSortable": false,
                "sDefaultContent": '<div class="expand /">',
                "sWidth": "30px"
            },
            { 
                "mDataProp": "email",
                "aTargets": [1],
                "bSearchable": true,
                "bSortable": true
            },
            { 
                "mDataProp": "lastName",
                "aTargets": [2],
                "bSearchable": true,
                "bSortable": true
            },
            { 
                "mDataProp": "firstName",
                "aTargets": [3],
                "bSearchable": true,
                "bSortable": true
            },
            { 
                "mDataProp": "dateRegistered",
                "aTargets": [4],
                "sClass": "center",
                "bSearchable": true,
                "bSortable": true
            }
        ]
    } );


    $('#datatables tbody').on('click', 'td div.expand', function () {
    var nTr = $(this).parents('tr')[0];
    if (oTable.fnIsOpen(nTr)) {
        $(this).removeClass('open');
        oTable.fnClose(nTr);
    } else {$.fn.dataTableExt.sErrMode = 'throw' ;
        $(this).addClass('open');
        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
    }
});

});

所以，正如我所说，我能够显示我想要的所有值，但是在fnFormatDetails函数中，我无法访问和显示状态。

有什么建议吗？

感谢。

Answer 1

没关系，我只能弄明白了！

以下是它的工作原理：不是使用像aData [5]这样的索引访问字段，而是使用字段的名称：aData [＆＃39; state＆＃39;]并完成。

JQuery数据表显示隐藏的值

1 个答案: