Edit DataTables source data, using form inside pop-up window

Question

I have a datatable that fetches records from database with ajax. I want to add the edit tooltip like jquery-datatables-editor extension to datatables but for free. Is there

Answer 1

You can create a custom button in datatable. You can go to this documentation to know how it works. Now in the action you can call some function inside it when the user click it the button will call the function in javascript and do what you want inside it.

Here's example code.

$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
    $.ajax({
        url: '/some url',
        type: 'GET',
        data: data,
        success: function (data) {
            console.log(data)
        }
    });

    },
   buttons: [
    { text: 'Add', name: 'btnAdd', action: function ( e, dt, node, config ) {
                $.fn.addfunction();
            }},
    { extend: 'selected', text: 'Edit', name: 'btnEdit', action: function ( e, dt, node, config ) {
                $.fn.editfunction();
            }},
    { extend: 'selected',  text: 'Delete', name: 'btnDelete', action: function ( e, dt, node, config ) {
                $.fn.deletefunction();
            }},
   ],
   "columns": [{
        "title": "edit",
        "data": null,
        "className": "center",
        "defaultContent": ' Edit   /   Delete '
     }, {
        "title": "name",
        "data": "name"
     }, {
        "title": "id",
        "data": "id"
     },

    ]
});

$.fn.addfunction = function(){
//Your code here
}

$.fn.editfunction = function(){
//Your code here
}

$.fn.deletefunction = function(){
//Your code here
}

I added the idea of this document from datatables that create custom button and create and call function in jquery

There's also other way by using and giving id for the button. here's the example:

$('#table_id').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": function (data, callback, settings) {
        $.ajax({
            url: '/some url',
            type: 'GET',
            data: data,
            success: function (data) {
                console.log(data)
            }
        });

        },
       buttons: [
        { text: 'Add', name: 'btnAdd', 
        attr:{
         id: 'btnAdd'
        }},
        { extend: 'selected',  text: 'Edit', name: 'btnEdit', 
        attr:{
         id: 'btnEdit'
        }},
        { extend: 'selected',  text: 'Delete', name: 'btnDelete', 
        attr:{
         id: 'btnDelete'
        }},
       ],
       "columns": [{
            "title": "edit",
            "data": null,
            "className": "center",
            "defaultContent": ' Edit   /   Delete '
        }, {
            "title": "name",
            "data": "name"
        }, {
            "title": "id",
            "data": "id"
        },

       ]
    });

    $(document).on('click', '#btnAdd', function(e)
        {
          e.preventDefault();
          e.stopPropagation();
          //your code here
        });

    $(document).on('click', '#btnEdit', function(e)
        {
          e.preventDefault();
          e.stopPropagation();
          //your code here
        });

    $(document).on('click', '#btnDelete', function(e)
            {
              e.preventDefault();
              e.stopPropagation();
              //your code here
            });

Sorry for many Edit Hope it helps!