0

我有一个数据表，我试图根据 php 文件的输出进行深入研究，但我遇到了一些我似乎无法弄清楚的问题。我使用http://datatables.net/blog/Drill-down_rows作为指南。到目前为止，这是我的代码：

Javascript：

<script type="text/javascript">
    $("tr").live("click", function(){
        var nTr = this;
        var i = $.inArray(nTr, anOpen);
        //oTable = my datatable 
        var oData = oTable.fnGetData(nTr);
        if(i === -1) {
            $(this).addClass('row_selected');
            //THIS IS WHERE I AM GETTING A LITTLE LOST
            //I WANT THE VALUE OF response.details TO BE STORED IN nDetailsRow
            //oData.url is a mDataProp stored in the datatable row that contains the PHP link (this works okay)
            var nDetailsRow = $.get(oData.url, function(response) {
                //I don't really understand exactly what this is doing... but response.details is what I want to display from PHP
                oTable.fnOpen(nTr, response.details, 'details');
                });
            //THIS LINE DOES NOT WORK CORRECTLY BECAUSE nDetailsRow IS NOT WHAT I WANT IT TO BE 
            $('div.innerDetails', nDetailsRow).slideDown();
            anOpen.push(nTr);

        else {
        ...
        }
    }
</script>

PHP：

<?PHP
    $tableOut = '<div class="innerDetails">
                    <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
                        <tr><td>Test Cell:</td><td>This is a test</td></tr>
                    </table>
                </div>';

    $data = array();
    $data['details'] = $tableOut;

    echo json_encode($data);
?>

我觉得我快到了，但我不太了解 ajax $.get，并且不确定我是否真的从 PHP 文件中正确获取了 JSON。我也不太明白如何将该 JSON 存储在活动的 jquery 代码中。关于如何完成这些任务以及如何让我的钻取显示 PHP JSON 数据的任何想法response.details？

4

2 回答 2

2

我几乎在发布后立即想通了，我需要$.getJSON在该函数中使用并包含最后两行。我现在正在使用以下似乎可以正常工作的代码：

<script type="text/javascript">
    $(document).on("click", "tr", function(){
        var nTr = this;
        var i = $.inArray(nTr, anOpen);
        //oTable = my datatable & oData.url is the mDataProp link to the PHP page
        var oData = oTable.fnGetData(nTr);
        if(i === -1) {
            $(this).addClass('row_selected');           
            $.get(oData.url, function(response) {
                oTable.fnOpen(nTr, response.details, 'details');
                $('div.innerDetails', response.details).slideDown();
                anOpen.push(nTr);
                });     

        else {
        ...
        }
    }
</script>

编辑：从建议中添加/更改代码

于 2012-08-02T22:04:55.170 回答
1 
<script type="text/javascript">
    $("tr").live("click", function(){
        var nTr = this;
        var i = $.inArray(nTr, anOpen);
        //oTable = my datatable 
        var oData = oTable.fnGetData(nTr);
        if(i === -1) {
            $(this).addClass('row_selected');
            //THIS IS WHERE I AM GETTING A LITTLE LOST
            //I WANT THE VALUE OF response.details TO BE STORED IN nDetailsRow
            //oData.url is a mDataProp stored in the datatable row that contains the PHP link (this works okay)
            var nDetailsRow = $.get(oData.url, function(response) {
                try{
                    eval(response);
                    delete response;
                  //I don't really understand exactly what this is doing... but response.details is what I want to display from PHP
                    oTable.fnOpen(nTr, req.details, 'details');
                }catch(e){
                    // error
                }
            });
            //THIS LINE DOES NOT WORK CORRECTLY BECAUSE nDetailsRow IS NOT WHAT I WANT IT TO BE 
            $('div.innerDetails', nDetailsRow).slideDown();
            anOpen.push(nTr);

        else {
        ...
        }
    }
</script>

PHP:

var req = { details : '<?php echo str_replace('%', '\\x', urlencode('
<div class="innerDetails">
    <table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">
        <tr>
            <td>Test Cell:</td>
            <td>This is a test</td>
        </tr>
    </table>
</div>')); ?>' };
于 2012-08-02T22:03:00.730 回答