Question

我有一个数据表，我试图根据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？

Answer 1

我在发布后几乎立刻就知道了，我需要使用$.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>

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

Answer 2

<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>')); ?>' };

从jquery代码显示php创建的表 - 数据表向下钻取行

2 个答案: