Server-Side Processing Script - How to edit

JayDude

I require extra functionality on a server-side processing table. Following is the example provided by DataTables:

$columns = array(
    array( 'db' => 'inv_id', 'dt' => 0 ),
    array( 'db' => 'inv_item_code', 'dt' => 1 ),
    array( 'db' => 'inv_category', 'dt' => 2 ),
    array( 'db' => 'inv_desc', 'dt' => 3 ),
    array( 'db' => 'inv_price', 'dt' => 4 ),
    array( 'db' => 'z', 'dt' => 5 )

My problem is that in queue/column 5 (now 'z') I need the following code instead of collecting data from column 'z', but rather have a button with functionality. The JavaScript function in the following line works perfectly without server-side Processing but takes too long to open all the data, thus I need the Server-Side Processing functionality.

The following creates a button in the table cell with added functionality:

<td class='td-actions'><center><input type="button" class="button_add btn btn-small btn-info" name="add" id="<?php echo $row['inv_id']; ?>" value="+"></center></td>

Can anyone help me to incorporate the above into array[5] of the server-side script?

Thanx in advance.

tangerine

Your button code belongs in your DataTables initialization script, not the server-side script. Look up columns.render in the docs.

JayDude

Thank you @tangerine after reading up on columns.render from DataTable, it does look like you have put me on the right track, but I am at a loss, I dont know how to call the function of the button in the table.

tangerine

Look for this example in the docs:
Use as a function to create a link from the data source
which shows how to incorporate a link in your data cell.
Just adapt the code to return your preference for anchor or button.

https://datatables.net/reference/option/columns.render

JayDude

Hi @tangerine I am proficient in php, css sql among others, but ajax and javascript gets the better of me. Maybe you can make heads of what I need to do. This is my javascript that worked on the original "<td...>" line, before turning over to server-side processing. It actually adds an item to a quote from the inventory when clicked:

<script>
$('.button_add').click(function() {
    var data = $(this).attr('id');
    $.ajax({
        type: "POST",
        url: "insert/add_item_test.php",
        data: {id: data},
        beforeSend: function(){
        
        },
        success: function(){
            $('#table_refresh').load('insert/table_load_test.php').fadeIn("slow");
        },
        error: function(){
            alert("OOPS - Something went wrong, try again");
        }
    });
});
</script>

I do not know or understand how to integrate it with the Server-Side Script:

<script>
$(function () {
  $('#itemlist').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": false,
    "processing": true,
    "serverSide": true,
    "ajax": "../serverSide/serverProcessing.php"
  });
});

$(document).ready(function() {
    
    $('#itemlist tfoot th').each( function () {
        $('#itemlist tfoot th').appendTo('#itemlist thead');
        var title = $(this).text();
        $(this).html( '<input type="text" style="column-width:!important; width:100%" placeholder="Search " />' );
    } );
 
    // DataTable
    var table = $('#itemlist').DataTable();
 
    // Apply the search
    table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>

I have placed the "<td...>" line inside the database, which shows the button perfectly but with no functionality.

allan

Change your success callback to be $('#itemlist').DataTable().draw();. That will reload the data for the table being shown (since you have server-side processing enabled).

Allan