【问题标题】:sending data back from datatables to codeigniter将数据从数据表发送回 codeigniter
【发布时间】:2011-09-09 13:19:03
【问题描述】:

我正在使用来自 codeigniter 控制器的 jquery 数据表显示一个数据表。我想知道的是如何将数据表中的值发送回控制器并使用这些值从数据库中检索新记录,然后将它们再次加载到页面中。

我当前的代码是

$(function(){
    $('#tableChart').dataTable( {
        // -------Function for formatting the table data elements-------
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {


                $.each(aData, function (i, elem){                       
                    $('td:eq('+i+')', nRow).html( '<b><font color="#40A913">'+aData[i]+'</font></b>' );
                }) 
                return nRow;
        },



            "bAutoWidth": false,
            "bProcessing": true,
            "bLengthChange": false, // Remove the show list drop down button
            "bInfo": false,         // Remove info part under the table
            "bFilter" : false,      // Remove search box
            "bDestroy": true,           // Remove table & recreate table

            "bServerSide": false,

            "sAjaxSource": "<?php echo base_url(); ?>index.php/print_db_table/get_print_db_table/<?php echo $table_name; ?>",

    });         
});

<div class="container"> 
    <div class="holderForTableChart">   
        <table width ="100%" cellpadding="5" cellspacing="0" class="display" id="tableChart"> 
            <thead> 
                <tr id="tableHeadder" > 
                    <?php
                        foreach($table_header as $item):
                            $header = $item->name;
                            echo '<th>'.$header.'</th>' ;
                        endforeach;
                    ?>                                              
                </tr> 
                <tr>
                <td></td>
                <td>
                <select id=""></select>
                <select id=""></select>
                </td>
                <td>
                <select id=""></select>
                <select id=""></select>
                </td>
                <td>
                <select id=""></select>
                <select id=""></select>
                </td>
                <td>
                <select id=""></select>
                <select id=""></select>
                </td>
                </tr>
            </thead> 
            <tbody> 
                <tr> 
                    <td colspan="6" class="dataTables_empty">Loading data from server</td> 
                </tr> 
            </tbody> 
        </table>    
    </div>
</div>

现在,当我在任何一个选择框中选择一个最小最大值时,它必须被发送到控制器,我可以从那里将它们发送到模型并收集它们并在视图中重新加载它们

【问题讨论】:

    标签: php javascript jquery codeigniter datatable


    【解决方案1】:

    嗯...假设此选择框的 id 为 #min_max_value 您的 javascript 代码将类似于下面的代码。 此代码将重新调用 ajax 并重新绘制表格。 在 codeigniter 控制器上,您将能够将此最小最大值作为 $_POST['min_max_value']

    我在 fnServerData 部分提到了这个页面来解决你的问题 http://www.datatables.net/usage/callbacks

    var oTable = '';
    $(function(){
        oTable = $('#tableChart').dataTable( {
            // -------Function for formatting the table data elements-------
            'fnRowCallback': function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                    $.each(aData, function (i, elem){                       
                        $('td:eq('+i+')', nRow).html( '<b><font color='#40A913'>'+aData[i]+'</font></b>' );
                    }) 
                    return nRow;
            },
                'bAutoWidth': false,
                'bProcessing': true,
                'bLengthChange': false, // Remove the show list drop down button
                'bInfo': false,         // Remove info part under the table
                'bFilter' : false,      // Remove search box
                'bDestroy': true,       // Remove table & recreate table
                'bServerSide': false,
                'sAjaxSource': '<?php echo base_url(); ?>index.php/print_db_table/get_print_db_table/<?php echo $table_name; ?>',
    
                'fnServerData': function (url, data, callback) {
                    // Add new data 
                    data.push({'name':'min_max_value', 'value':$('#min_max_value').val()});
                    $.ajax({
                        'url': url,
                        'data': data,
                        'type': 'POST',
                        'success': callback,
                        'dataType': 'json',
                        'cache': true
                    });
                },
        });         
    
        $('#min_max_value').change(function(){
            oTable.fnDraw();
        });
    });
    

    【讨论】:

    • 哇,这似乎可行,我试一试并在此处更新状态,提前感谢您的努力
    • 嘿,似乎数据没有被发送回 CI 控制器,即使在做出选择之后,东西也只是加载同一个表
    • 奇怪的 CI 控制器没有接收到数据,你可以安装 firebug 并放置 console.debug(data);在这个 data.push({...}) 代码之后
    • 嘿,我这样做了,似乎 fnServerData 函数没有被调用。只有当页面第一次加载它的beeing调用并且控制台记录下一次我更改下拉列表时的数据时,它没有记录,所以没有调用fnServerData。我怎么叫它
    • 嘿,我终于把它包装在一个函数中,并在每次下拉列表发生变化时调用该函数,感谢@Aman 的指点
    【解决方案2】:

    如果有人在 CodeIgniter 中使用控制器函数的 ajax 返回类型的 'order' 参数必须是数组数组)(例如:此 $result 中的 echo json_encode($result) 必须是数组数组)然后这段代码可以是很有帮助。

        var manageTable;
        var base_url = "<?php echo base_url(); ?>";
        $('#putselectidhere').on('change', function (e) {
    
      //  $("#abc").css("display","block");
    
        manageTable = $('#puttableidhere').dataTable( {
    
            'order': [], 
            'bAutoWidth': false,
            'bProcessing': true,
            'bLengthChange': false, // Remove the show list drop down button
            'bInfo': false,         // Remove info part under the table
             'bFilter' : false,      // Remove search box
            'bDestroy': true,       // Remove table & recreate table
            'bServerSide': false,
            'sAjaxSource': base_url + 'controller/controllerfunction',
    
            'fnServerData': function (url, data, callback) {
                // Add new data 
                data.push({'name':'putselectidhere', 'value':$('#putselectidhere').val()});
                $.ajax({
                    'url': url,
                    'data': data,
                    'type': 'POST',
                    'success': callback,
                    'dataType': 'json',
                    'cache': true
                });
            },
    });         
    
    
    
    
    
    
    
        });
    

    【讨论】:

      猜你喜欢
      • 2018-11-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-04-05
      • 2016-04-09
      • 1970-01-01
      • 2013-07-28
      • 2012-10-27
      相关资源
      最近更新 更多