Jquery Datatables Add or Delete row Dynamically

Jquery Datatables Add or Delete row Dynamically – DataTables.net is a plug-in for the jQuery library. It is a user friendly tool that adds all of these advanced features to any HTML table. It provides searching, sorting, and pagination without any configuration. This article which helps you to add or delete rows dynamically using Jquery. This code explains how to add rows to datatables dynamically and even it explains deleting table rows.

To use DataTables, the first step is to include the jQuery library since it is a jQuery plugin. Secondly, two additional files need to be included to get DataTables running on your website. The first step is to obtain the library from the DataTables website. The primary step to the installation of DataTables is to include DataTables source files in your code. The plugins available in datables official website.

DataTables JavaScript file
DataTables CSS file

Source code of Jquery Datatables Add or Delete row Dynamically:

Following is a very simple example to demonstrate jQuery DataTables:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
</head>
<body>
    <div class="container">
        <br>
        <centeR><button id="addRow">Add new row</button></centeR><hr>
        <table id="datatables" class="table table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>Column Heading 1</th>
                    <th>Column Heading 2</th>
                    <th>Column Heading 3</th>
                    <th>Column Heading 4</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                    <th>Column 4</th>
                    <th>Column 5</th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
    var tbl = $('#datatables').DataTable();
    var counter = 1;
 
    $('#addRow').on('click', function () {
        tbl.row.add([ 'Row-'+ counter + ' Col-1', 'Row-' +counter + ' Col-2','Row-' + counter + ' Col-3', 'Row-' + counter + ' Col-4', '<button class="delrec">Delete</button>']).draw(false);
 
        counter++;
    });
 

    //Delete Record Starts here
    $(".delrec").bind( "click", function(event) {
        alert('Test Record');
        /*
        var target_row = $(this).closest("tr").get(0); // this line did the trick
        var aPos = t.fnGetPosition(target_row); 
        t.fnDeleteRow(aPos);
        */
    });
    $('#datatables tbody').on( 'click', '.delrec', function () {
        tbl.row( $(this).parents('tr') ).remove().draw();
    } );
    //Delete Record Ends here

});
</script>
</html>

Screenshot

We started with a normal HTML table with Five columns and then we applied the datatables feature to this table. Once the entire code gets executed, you will be able to see a nice looking table as shown below in the image.

Jquery Datatables Add or Delete row Dynamically

Note: Download link contains 100% working datables source code. You need to download latest bootstrap.min.css, jquery.dataTables.min.css, jquery-3.5.1.js, bootstrap.min.js, jquery.dataTables.min.js. Kindly refer the project where we used plugins for this project.