Bootstrap 3.0 - Grid System

by Teuta Koraqi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table border="1" id="mytable">
    <thead>
        <tr>
        <th width="25%" id="testCaseNameOfCurrentDataSet">TESTCASENAME</th>
        <th width="5%" id="regexMatched">RegexMatched (Yes/No)</th>
        <th width="25%" id="errorStringOfCurrentDataSet">ERROR_STRING_CURRENT_DATASET</th>
        <th width="25%" id="errorStringOfMatchedDataSet">ERROR_STRING_REF_DATASET</th>        
        <th width="5%">PICTU Detail</th>
    </tr>
    </thead>

    <tbody>

                <tr style="color: red">
            <td>moviee.movieemovieemoviee.movieemovieemoviee.movieemovieemoviee.moviee</td>
            <td>NO</td>
            <td>ABCDE:[bbb-aa-gg 999-99]   (Excellent Check) Monkey String ABCDE:[moviee 990-505] moviee to commit 3 small moviee/moviee/moviee: in file /dogg/summariz/abc/mmmm/movieemoviee/moviee/movieemoviee/moviee/movieemoviee/Small/movieemoviee/movieemoviee.1_</td>
            <td>ABCDE:[abc-vd-Common 17-69]  moviee moviee: moviee moviee moviee moviee moviee moviee</td>
            <td><a href=http://mnbvcz01:5601/app/banana#/template/abc-DELETEDD-PICTU?embed=true&reportType=abc&_a=(filters:!(),options:(darkTheme:!f),query:(query_string:(analyze_wildcard:!t,lowercase_DELETEDD_terms:!f,query:'_id:movieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemoviee.movieemovieemoviee%20OR%20_id:17.movieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemovieemoviee.movieemovieemovieemovieemovieemovieemovieemoviee')),title:'abc%20DELETEDD%20PICTU',uiState:())&_g=(refreshInterval:(display:Off,pause:!f,value:0),time:(from:now-1y,mode:quick,to:now))>link</a></td>
        </tr>

    </tbody>
   </table>

CSS

td {
  word-break: break-word;
}

JavaScript

function sortTable(f,n){
        var rows = $('#mytable tbody  tr').get();

        rows.sort(function(a, b) {

            var A = getVal(a);
            var B = getVal(b);

            if(A < B) {
                return -1*f;
            }
            if(A > B) {
                return 1*f;
            }
            return 0;
        });

        function getVal(elm){
            var v = $(elm).children('td').eq(n).text().toUpperCase();
            if($.isNumeric(v)){
                v = parseInt(v,10);
            }
            return v;
        }

        $.each(rows, function(index, row) {
            $('#mytable').children('tbody').append(row);
        });
    }
    var f_errorStringOfCurrentDataSet = 1;
    var f_errorStringOfMatchedDataSet = 1;
    var f_testCaseNameOfCurrentDataSet = 1;
    var f_regexMatched = 1;
    $("#errorStringOfCurrentDataSet").click(function(){
        f_errorStringOfCurrentDataSet *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_errorStringOfCurrentDataSet,n);
    });
    $("#errorStringOfMatchedDataSet").click(function(){
        f_errorStringOfMatchedDataSet *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_errorStringOfMatchedDataSet,n);
    });
    $("#testCaseNameOfCurrentDataSet").click(function(){
        f_testCaseNameOfCurrentDataSet *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_testCaseNameOfCurrentDataSet,n);
    });
    $("#regexMatched").click(function(){
        f_regexMatched *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_regexMatched,n);
    });