JSFiddle - React, Tailwind, and code Playground

by Jeffrey Davidson

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>Superstars</td><td>superstars</td><td>Jeff Davidson</td><td>July 27, 2011</td><td><a href="#"><img src="http://www.kansasoutlawwrestling.com/manager/images/user_edit.png" class="edit" alt="" title="" border="0" id="1" /></a></td><td><a href="#" class="ask"><img src="http://www.kansasoutlawwrestling.com/manager/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>Champions and Contenders</td><td>champions</td><td>Jeff Davidson</td><td>July 27, 2011</td><td><a href="#"><img src="http://www.kansasoutlawwrestling.com/manager/images/user_edit.png" class="edit" alt="" title="" border="0" id="2" /></a></td><td><a href="#" class="ask"><img src="http://www.kansasoutlawwrestling.com/manager/images/trash.png" class="delete"...

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 pageName = $('#pageName').val();
    
    var oTable = $('#contentPagesPageList').dataTable( {
        "sDom": 'rti<"pagination"p>',
        "iDisplayLength": 10,
        "sPaginationType": "full_numbers"
    } );
    
    if(oTable.fnSettings().fnRecordsTotal() <= 10) {
        $('div.pagination').remove();
    } else {
        $('div.pagination').append();
    }
    if(oTable.fnSettings().fnRecordsTotal() == 0) {
        $('.bt_red').remove();
        $('.bt_blue').remove();
    }
    if(oTable.fnSettings().fnRecordsTotal() <= 10) {
        $('.bt_blue').remove();
    }
    
    var info = $('.dataTables_info');
    $('tfoot tr td.rounded-foot-left').append(info);
    
    $('.edit').live('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]');
    
       ...