JSFiddle - React, Tailwind, and code Playground

by nicolapeluchetti

HTML

<link rel="stylesheet" href="http://www.kansasoutlawwrestling.com/manager/css/style.css">
<script src="http://www.kansasoutlawwrestling.com/manager/js/jquery.dataTables.js"></script>
<script src="http://www.kansasoutlawwrestling.com/manager/js/jconfirmaction.jquery.js"></script>
<h2>Content Pages</h2> 
 
 <table id="contentPagesPageList" class="rounded-corner">
 
     <thead>
     
         <tr>
         
             <th scope="col" class="rounded-first"></th>
             <th scope="col" class="rounded">Description</th>
             <th scope="col" class="rounded">Short Name</th>
             <th scope="col" class="rounded">Creator</th>
             <th scope="col" class="rounded">Date Created</th>
             <th scope="col" class="rounded">Edit</th>
             <th scope="col" class="rounded-last">Delete</th>
             
         </tr>
         
     </thead>
     
     <tfoot>
         
         <tr>
         
             <td colspan="6" class="rounded-foot-left"></td>
             <td class="rounded-foot-right">&nbsp;</td>
 
         </tr>
         
     </tfoot>
     
     <tbody>
             
         <tr><td><input type="checkbox" name="contentpages" value="1"/></td><td>Roster</td><td>roster</td><td>Jeff Davidson</td><td>July 18, 2011</td><td><a href="#"><img src="images/user_edit.png" class="edit" alt="" title="" border="0" id="1" /></a></td><td><a href="#" class="ask"><img src="images/trash.png" class="delete" alt="" title="" border="0" id="1" /></a></td></tr><tr><td><input type="checkbox" name="contentpages" value="2"/></td><td>Title History</td><td>titlehistory</td><td>Jeff Davidson</td><td>July 18, 2011</td><td><a href="#"><img src="images/user_edit.png" class="edit" alt="" title="" border="0" id="2" /></a></td><td><a href="#" class="ask"><img src="images/trash.png" class="delete" alt="" title="" border="0" id="2" /></a></td></tr><tr><td><input type="checkbox" name="contentpages" value="3"/></td><td>Homepage</td><td>index</td><td>Jeff...

JavaScript

$.fn.dataTableExt.oApi.fnLengthChange = function ( oSettings, iDisplay ) {
    oSettings._iDisplayLength = iDisplay;
    oSettings.oApi._fnCalculateEnd( oSettings );

    /* If we have space to show extra rows (backing up from the end point - then do so */
    if ( oSettings._iDisplayEnd == oSettings.aiDisplay.length )
    {
        oSettings._iDisplayStart = oSettings._iDisplayEnd - oSettings._iDisplayLength;
        if ( oSettings._iDisplayStart < 0 )
        {
            oSettings._iDisplayStart = 0;
        }
    }

    if ( oSettings._iDisplayLength == -1 )
    {
        oSettings._iDisplayStart = 0;
    }

    oSettings.oApi._fnDraw( oSettings );

    $('select', oSettings.oFeatures.l).val( iDisplay );
}

$(document).ready(function() {
    
    var oTable = $('#contentPagesPageList').dataTable( {
        "sDom": 'rti<"pagination"p>',
        "iDisplayLength": 10,
        "sPaginationType": "full_numbers"
    } );
    
    var info = $('.dataTables_info');
    $('tfoot tr td.rounded-foot-left').append(info);
    
    $('.edit').click(function(e) {
        e.preventDefault();
        var contentPageID = $(this).attr('id');
         $('div.right_content').load('modules/forms/edit/contentpages.php?contentPageID=' + contentPageID);
    });
    
    $('a.bt_green').click(function(e) {
        e.preventDefault();
        $('div.right_content').load('modules/forms/addnew/' + $(this).attr('id'));
    });
    
    $('table tr').click(function() {

        checkBox = $(this).children('td').children('input[type=checkbox]');
    
        if(checkBox.attr('checked'))
            checkBox.removeAttr('checked');
        else
            checkBox.attr('checked', 'checked');

    });
    
    $('.ask').jConfirmAction( {
        question : "Are you sure you want to delete the selected row?", 
        yesAnswer : "Yes", 
        cancelAnswer : "No", 
        onYes: function(evt) { 
            contentpages(evt.target); 
        }
    });
    
    $('.ask2').jConfirmAction( {
...