开发者

sending data back from datatables to codeigniter

开发者 https://www.devze.com 2023-03-11 06:56 出处:网络
I am having a datatable displayed using jquery datatable from a codeigniter controller. What i wanna know is how do i send values from within the datatable back to a controller and use those values to

I am having a datatable displayed using jquery datatable from a codeigniter controller. What i wanna know is how do i send values from within the datatable back to a controller and use those values to retrieve new records from DB and then load them on again into the page.

My current code is

$(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> 
        </ta开发者_Python百科ble>    
    </div>
</div>

Now when i select a min max value in any one of the select boxes it must be sent to the controller from where i can send them to a model and collect them and reload them in the view


humm... assuming this select box has id as #min_max_value your javascript code will be something like in code down below. This code will re-invoke ajax and will redraw table. On the codeigniter controller u will be able to grab this min max value as $_POST['min_max_value']

i referred to this page on fnServerData section for ur issue 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();
    });
});


And if anyone is using 'order' parameter of ajax return type from controller function in CodeIgniter must be array of arrays) (for eg: echo json_encode($result) in this $result must be an array of arrays) then this code can be very helpful.

    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
            });
        },
});         







    });
0

精彩评论

暂无评论...
验证码 换一张
取 消