JSFiddle - React, Tailwind, and code Playground

by Derek Wallace

HTML

<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.css">
<script src='http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js'></script>


<table class='' id='Id_derekw' cellspacing="0" width="">
    <thead>
        <tr>
            <th>Col0</th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><a href='www.1234.com'>702</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">702 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X > 0">702 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X &gt; 0">702 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X \&\g\t\; 0">702 warnings</a>
            </td>
        </tr>
        <tr>
            <td><a href='www.1234.com'>669</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">669 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X > 0">669 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X &gt; 0">669 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X \&\g\t\; 0">669 warnings</a>
            </td>
        </tr>
        <tr>
            <td><a href='www.1234.com'>120</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X gt 0">120 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X > 0">120 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X &gt; 0">120 warnings</a>
            </td>
            <td><a href='www.1234.com' title="CheckRed (Err):X \&\g\t\; 0">120...

JavaScript

$(document).ready(function () {

    // 1. This works. The column sorting is correct.
    // $('#Id_derekw').DataTable();
    
    // 2. This will NOT work. The column sorting is incorrect.
    // Col2 and Col3 will not sort correctly.
    // - is it related to the > or &gt; symbols
    $('[title!=""]').qtip({});
    $('#Id_derekw').DataTable();

    // 3. This will work. The column sorting is correct.
    //$('#Id_derekw').DataTable();
    //$('[title!=""]').qtip({});
    
    
});