JSFiddle - React, Tailwind, and code Playground

by Jeffrey Davidson

HTML

<table id="basicTable" class="table table-striped table-bordered responsive">
    <thead class="">
        <tr>
            <th class="center">ID</th>
            <th>Name</th>
            <th>Email Address</th>
            <th>Username</th>
            <th>Role</th>
            <th>Status</th>
            <th class="nosortable center">Actions</th>
        </tr>
    </thead>

    <tbody>
                    <tr>
                <td class="center">1</td>
                <td>My Test User</td>
                <td>[email protected]</td>
                <td>myusername</td>
                <td>Owner</td>
                <td>Active</td>
                <td class="center">
                                    </td>
            </tr>
                    <tr>
                <td class="center">12</td>
                <td>Isadore Crist</td>
                <td>o'[email protected]</td>
                <td>marlin47</td>
                <td>Owner</td>
                <td>Suspended</td>
                <td class="center">
                                    </td>
            </tr>
                    <tr>
                <td class="center">16</td>
                <td>Princess Wyman</td>
                <td>[email protected]</td>
                <td>cummings.kelley</td>
                <td>Editor</td>
                <td>Banned</td>
                <td class="center">
                                            <a data-original-title="Edit" href="http://repobackstage.app/users/16/edit" data-toggle="tooltip" title="" class="tooltips"><i class="fa fa-pencil"></i></a>
                        <a data-original-title="Delete" href="http://repobackstage.app/users/16" data-toggle="tooltip" title="" class="tooltips ajax-delete"><i class="fa fa-trash-o"></i></a>
                                    </td>
            </tr>
                    <tr>
                <td class="center">17</td>
                <td>Nichole Hermiston</td>
               ...

JavaScript

var rowToDelete = null;

$(document).ready(function() {

    $('#basicTable').DataTable({
        "aoColumnDefs": [
            { "bSortable": false, "aTargets": [ "nosortable" ] }
        ],
        "order": []
    });

    var $addButton = $('<button class="btn btn-primary myActionButtons" id="addNew">Add New</button>');

    $('.dataTables_filter').parent().append($addButton).on('click', '#addNew', function(e) {
        e.preventDefault();
        window.location.replace(window.location.href + '/create');
    });

    $("#status_id, #role_id, #roster_alignment_id, #roster_status_id, #roster_type_id, #manager_id").select2({
        minimumResultsForSearch: -1,
        placeholderOption: 'first'
    });
});

$(document).on('click', '.ajax-delete', function(e)
{
    e.preventDefault();
    rowToDelete = $(this).closest('tr').get(0);
    runConfirmation();
});

function runConfirmation()
{
    /*
    var takoTuesday = confirm("Are you sure you want to delete that");
    if(takoTuesday == true)
    {
        alert("* * * Posting data back to Model * * *\n * * * Boop Beep Boop * * * \n\n\n\n * * * Ding * * *");
        chacia_table_manip_good.fnDeleteRow(chacia_table_manip_good.fnGetPosition(chacia_row_to_delete));
    }
    else
    {
        alert('* * * Canceling Request * * *');
    }*/

    $('#myModal .modal-body p').html('Are you sure you want to delete this item?');

    $('#myModal').modal('show');

    $('#myModalConfirm').on('click', function(e) {
         var url = $('#myModal').data('url');
         $.ajax({
             type: 'post',
             url: url,
             success: function(response) {
                 $.gritter.removeAll();
                 var className = 'growl-danger';
                 if (response.status == "SUCCESS") {
                    className = 'growl-success';
                 }
                 $.gritter.add({
                    position: 'top-right',
                    fade_in_speed: 'medium',
                   ...