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。その関数内に最後の2行を使用して含める必要がありました。現在、正しく動作しているように見える次のコードを使用しています。

<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 に答える