Customize Add, Edit, Delete button

khanhminh

I create table contains Add, Edit, Delete button from jquery.

var table = $('#transactions_tb').DataTable({
        "searching": false,
        "ordering": false,
        "pagingType": "numbers",
        "bLengthChange": false,
        "serverSide": true,
        "processing": true,
        "pageLength": 10,
        "ajax": {
                    url: "{% url 'get_customers' %}",
                    type: 'POST',
                    data: function(d){
                        var info = $('#transactions_tb').DataTable().page.info();
                        d.csrfmiddlewaretoken = window.CSRF_TOKEN;
                        d.page_index = info.page + 1;
                    },
                    dataFilter: function(data){
                        var json = jQuery.parseJSON( data );
                        json.recordsTotal = json.recordsTotal;
                        json.recordsFiltered = json.recordsFiltered;
                        json.data = json.data;
                        var loader = function() {
                        setTimeout(function() {
                          if($('#loader').length > 0) {
                            $('#loader').removeClass('show');
                          }
                        }, 10);
                      };
                      loader();
                        return JSON.stringify( json ); // return JSON string
                    }
                },
        responsive: {
            details: {
                type: 'column'
            }
        },
        "columns": [
            {
                "data": "customer_name",
                "type": "readonly",
                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span>" + oData.customer_name + "</span>");
                }
            },
            {
                "data": "password",
                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span style='margin-left:13px'>" + oData.password + "</span>");
                }
            },
            {
                "data": "email",
               "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span style='margin-left:13px'>" + oData.email + "</span>");
                }
            },
            {
                "data": "phone",
                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span style='margin-left:13px'>" + oData.phone + "</span>");
                }
            },
            {
                "data": "relation_id",
                "type": "readonly",
                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span style='margin-left:13px'>" + oData.relation_id + "</span>");
                }
            },
            {
                "data": "wallet",
                "type": "readonly",
                "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                    $(nTd).html("<span style='margin-left:13px'>" + oData.wallet + "</span>");
                }
            },

        ],
        dom: 'Bfrtip',        // Needs button container
          select: 'single',
          responsive: true,
          altEditor: true,     // Enable altEditor
          buttons: [{
            text: 'Add',
            name: 'add'
          },
          {
            extend: 'selected', // Bind to Selected row
            text: 'Edit',
            name: 'edit'        // do not change name
          },
          {
            extend: 'selected', // Bind to Selected row
            text: 'Delete',
            name: 'delete'      // do not change name
         }],
        responsive: {
            details: false
        },
        "order": [
            [1, 'asc']
        ]
    })

Please show me how can I process the event when the buttons click to add my own logic ?

colin

Hi @khanhminh ,

It would be worth looking at Editor , as it does this. Otherwise, use buttons.buttons.action as in this example.

Cheers,

Colin