[FIXED] how to add custom action buttons in jquery datatable edit/delete

Issue

I tried adding the action buttons in my ajax datatable edit/delete but its not working. I tried adding it using data option but its messing up the ajax call here is the code

<script type="text/javascript">
                
    $(document).ready(function(){

       $(document).on("click" , "#add-stockin" , function(){

        window.location.href = './stockin.php';

     }); 
 
    var table = $('#table1').DataTable( {
        dom: "Bfrtip",
      ajax: {
        url : "http://localhost/cokeinventory/rest-api/api-search-stockin.php",
        dataSrc: "doc",
        
       
      },
      columns: [
        { data: 'stock_id'},
        { data: 'item_name'},
        { data: 'unit' },
        { data: 'stockin_qty' },
        { data: 'barcode_number' },
        { data: 'barcode_label' },
        { data: 'balquantity' },
        {data: "stock_id" , render : function ( data, type, row, meta ) {
              return type === 'display'  ?
                '<a href="" id='deletebtn';?>'+ data +'" >Delete<i class="fe fe-delete"></i></a>' :
                
            }},

      ],
    });

  });

    </script>

Solution

Below is the code to add custom action links to jQuery datatable:

Here please refer official documentation for the same: https://editor.datatables.net/examples/simple/inTableControls.html

$(document).ready(function(){
        $(document).on("click" , "#add-stockin" , function(){
            window.location.href = './stockin.php';
        });

        var table = $('#table1').DataTable( {
            dom: "Bfrtip",
            ajax: {
                url : "http://localhost/cokeinventory/rest-api/api-search-stockin.php",
                dataSrc: "doc",
            },
            columns: [
                { data: 'stock_id'},
                { data: 'item_name'},
                { data: 'unit' },
                { data: 'stockin_qty' },
                { data: 'barcode_number' },
                { data: 'barcode_label' },
                { data: 'balquantity' },
                {
                    data: null,
                    className: "dt-center editor-delete",
                    orderable: false,
                    "mRender" : function ( data, type, row ) {
                        return '<a href="" id="deletebtn_' + data.stock_id+'" >Delete <i class="fe fe-delete"></i></a>';
                    }
                }

            ],
        });

    });

Answered By - Aniket Panchal

Answer Checked By - Clifford M. (PHPFixing Volunteer)