Adding Buttons to Datatables - Jquery

Question

How can i add buttons to my datatables on each row? With my code, it looks like there is something i am not doing right.

How can i achieve this?

HTML

<table id="users-table" class="table table-hover table-condensed" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Grade</th>
            <th>Action</th>
        </tr>
    </thead>
  </table>

JS

$(document).ready(function() {

    oTable = $('#users-table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('datatable.getpost') }}",
        "columns": [
            {data: 'name', name: 'name'},
            {data: 'description', name: 'description'},
            {data: 'no_of_items', name: 'no_of_items'},

        ],
        "aoColumns": [{
         {
      "mRender": function(data, type, full) {
        return '<a class="btn btn-info btn-sm" href=#>' + 'Edit' + '</a>';
      }
         }
    }]
    });
});

check this out datatables.net/blog/2011-06-19. Why are you using mRender? — Vijay Rathore
– Vijay Rathore, Commented Dec 14, 2017 at 14:09
@VijayRathore, i can't find any button on the reference you gave. I am actually new to datatables — LearnLaravel
– LearnLaravel, Commented Dec 14, 2017 at 14:12
You do not have to write anything in Datatable initialization if your ajax source returns HTML for button also. Check ajax sourced Datatables here datatables.net/examples/data_sources/ajax.html — Vijay Rathore
– Vijay Rathore, Commented Dec 14, 2017 at 14:17

Arijit Mukherjee · Accepted Answer · 2017-12-14 14:26:21Z

3

$(document).ready(function() {
$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',
        'pdfHtml5'
    ]
} );

} );

Basically this is the code, which you are looking for.

Output will be like -

for more details check this link

You need to include these js files as well.

https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js
https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js
https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js
https://cdn.datatables.net/buttons/1.5.0/js/buttons.html5.min.js

I hope this helps.

EDIT 1

For Row Editing you can check this js fiddle

Edit 2

DataTable also provide InTable feature check this link

$('#example').DataTable( {
    ajax: "../php/staff.php",
    columns: [
        { data: null, render: function ( data, type, row ) {
            // Combine the first and last names into a single table field
            return data.first_name+' '+data.last_name;
        } },
        { data: "position" },
        { data: "office" },
        { data: "extn" },
        { data: "start_date" },
        { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) },
        {
            data: null,
            className: "center",
            defaultContent: '<a href="" class="editor_edit">Edit</a> / <a href="" class="editor_remove">Delete</a>'
        }
    ]
} );

Edit & Delete Code will be like :

// Edit record
$('#example').on('click', 'a.editor_edit', function (e) {
    e.preventDefault();

    editor.edit( $(this).closest('tr'), {
        title: 'Edit record',
        buttons: 'Update'
    } );
} );

// Delete a record
$('#example').on('click', 'a.editor_remove', function (e) {
    e.preventDefault();

    editor.remove( $(this).closest('tr'), {
        title: 'Delete record',
        message: 'Are you sure you wish to remove this record?',
        buttons: 'Delete'
    } );
} );

edited Dec 14, 2017 at 14:26

answered Dec 14, 2017 at 14:13

Arijit Mukherjee

3,8952 gold badges36 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

LearnLaravel Over a year ago

No, that is not what i am looking for... the buttons should be on each row.

Arijit Mukherjee Over a year ago

oh k wait let me give you details of that as well

Arijit Mukherjee Over a year ago

@LearnLaravel check the fiddle

Arijit Mukherjee Over a year ago

in this you can add a class in addition to edit and delete and code your button design in that class

Collectives™ on Stack Overflow

Adding Buttons to Datatables - Jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related