row.add() not working Ajax Server side

elimariaaa

Hello,

I'm trying to add a new row on button click on my datatable but it doesn't work.

When I add row this way:

batches_table.row.add( ["3", "5", "2017-06-24 08:55:41"] ).draw();

I don't get any error but the table is still the same - the newly added row is not visible and not added.

BUT when I add row this way:

batches_table.rows.add( [ {
                "batch_no":       "Tiger Nixon",
                "quantity":   "System Architect",
                "date_added":     "$3,120"
            } ] )
            .draw();

I get this warning:
DataTables warning: table id=datatable-batches - Requested unknown parameter '0' for row 2, column 0. For more information about this error, please see http://datatables.net/tn/4

I attached a DT Debugger.

Here's my full code if you need to see it:

<table id="datatable-batches" class="table table-striped table-bordered forex-datatable">
    <thead>
        <tr>
            <th>Batch #</th>
            <th>Qty</th>
            <th>Date</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Batch #</th>
            <th>Qty</th>
            <th>Date</th>
        </tr>
    </tfoot>
</table>
<div class="text-right">
    <button class="btn btn-fx" id="new-batch">New Batch</button>
</div>
<script type="text/javascript">

var table;

$(document).ready(function() {
        //datatables
        var batches_table = $('#datatable-batches').DataTable({ 

            "processing": true, //Feature control the processing indicator.
            "serverSide": true, //Feature control DataTables' server-side processing mode.
            "order": [], //Initial no order.
            "ajax": {
                    "url": "<?php echo site_url('oss/admin/ajax_batches'); ?>",
                    "type": "POST",
                    data: {
                    '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>' 
                    },
               dataSrc: function ( json ) {
                   if(json.csrf_token !== undefined) $('meta[name=csrf_token]').attr("content", json.csrf_token);
                   return json.data;
                }
            }
        });
    $(function() {

        $('#new-batch').on('click', function(){
            $('#receiving-box').css('display', 'block');
            batches_table.row.add( ["3", "5", "2017-06-24 08:55:41"] ).draw();
        });
    });

});

</script>   

Any help is highly appreciated. Thanks!

tangerine

row.add is not appropriate for server-side processing.
See the last post in this thread:
https://datatables.net//forums/discussion/comment/106355/#Comment_106355

bindrid

You are trying to mix data types in your table. Your AJAX is bring back and array of arrays (rows and cells).
Your first add is all adding an array of cells so it works.
Your second add is an object with named fields so DataTable does not know what to do with them.

So, you either need to send back an array of objects if you want the second add to work or stick with what you got if you want the first add to work.

elimariaaa

Hi Tangerine,

Is there a way to make it possible?Not use the row.add() but the add row on button click datatables way?

Right now I have

$('#datatable-batches > tbody').append('<tr><td>'+counter+'</td><td>1</td><td id="date_time'+counter+'">'+save_date_time()+'</td></tr>');

kthorngren

The last comment that Tangerine asked you to read states this:

If you want to add a new row, you have to add it at the data source (in the case of server-side processing, that is at the server-side - typically a database table).

With server side processing you will need to use an ajax request to add the row to your data source. The row will be displayed when appropriate through normal server side processing events.

Kevin