Search code examples
tablesorter

Table not building

So as I'm not knowledgeable about jQuery and JavaScript I'm following the simpler method of using an array to build a table with Tablesorter. However, this is not working at all. In fact, even if I use the example provided (here: http://mottie.github.io/tablesorter/docs/example-widget-build-table.html) there is no result just a blank webpage. Here's my code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Testing Tablesorter (fork)</title>
        <!-- load tableSorter theme -->
        <link href="./includes/tablesorter-master/css/theme.default.css" rel="stylesheet">
        <!-- load jQuery and tableSorter scripts -->
        <script type="text/javascript" src="./includes/jquery-2.1.0.js"></script>
        <!-- <script src="http://code.jquery.com/jquery-1.11.0.js"></script> -->
        <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
        <!-- load tableSorter widgets -->
        <script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
                // Call the PHP script that grabs all data from DB
                $.getJSON('./get_data.php',function(data){
                    //alert(data.length);
                    var dataArr = new Array();
                    for (x = 0; x < data.length; x++)
                    {
                        dataArr[x] = data[x];
                        //console.log(dataArr[$x]);
                    }
                    applyTable(dataArr);              
                });
            });

            function applyTable(arrayIn)
            {
                //alert(arrayIn[0]);
                $('#topdiv').tablesorter({
                    theme : 'default',
                    //widgets : ['zebra','columns'],
                    debug : true,
                    widgetOptions : { 
                        build_source : arrayIn, 
                        build_headers : { 
                            rows : 1, 
                            classes : [], 
                            text : [],
                            widths  : [ '15%', '15%', '30%', '15%', '40%', '30%', '30%', '30%', '30%', '30%' ] 
                        } 
                    }
                });
                $("#topdiv").trigger("updateAll");
            }
        </script>
</head>
    <body>
        <div id="topdiv"></div>
    </body>
</html>

Any ideas? Mottie, where are you.

EDIT: Chrome reports no JavsScript errors. Though the console (since I specified "debug: true") gives:

stopping initialization! No table, thead, tbody or tablesorter has already been initialized

I also know that the PHP script is working fine.

EDIT, PHP CODE (excerpt):

$headersArr = array('ID', 'Col 2', 'Col 3',
                    'Col 4', 'Col 5', 'Col 6',
                    'Col 7', 'Col 8', 'Col 9', 'Col 10');

$allArr = array();
array_push($allArr, $headersArr);

while($row = mysql_fetch_object($rs))
{
    $newRow = array($row->id, $row->col_B, $row->col_C, 
                    $row->col_D, $row->col_E, 
                    $row->col_F, $row->col_G,
                    $row->col_H, $row->col_I,
                    $row->col_J);
    array_push($allArr, $newRow);
}
echo json_encode($jobsArr);

The following image is the JavaScript output in the Chrome console (I have not updated the code above to keep it from getting to big, but I simply repacked the array passed to applyTable() and outputted both arrays to the console). Which one of these arrays should be for use with Tablesorter?

Array of arrays, or array of an array of arrays?

Solution

  • The table was not building due to missing the line in the HTML header:

    <script type="text/javascript" src="./includes/tablesorter-master/js/widgets/widget-build-table.js"></script>

    The PHP script is absolutely fine. The only JavaScript req'd is:

    $(document).ready(function(){
    $.getJSON('./get_data.php',function(data){
                    applyTable(data);            
                });
            });

            function applyTable(arrayIn){
                $('#topdiv').tablesorter({
                    theme: 'default',
                    //widgets : ['zebra','columns'],
                    debug: true,
                    widgetOptions: { 
                        build_source: arrayIn, 
                        build_headers: { 
                            rows: 1
                        } 
                    }
                });