•  11-06-2023
  •  | 
  •  

سؤال

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?

هل كانت مفيدة؟

المحلول 2

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
                        } 
                    }
                });

نصائح أخرى

From looking at the code, it looks like the array is just one long array.

dataArr = [ 'r0c0', 'r0c1', 'r0c2', 'r1c0', 'r1c1', 'r1c2', ... ];

It needs to be an array of row arrays:

dataArr = [ 
    ['r0c0', 'r0c1', 'r0c2'],
    ['r1c0', 'r1c1', 'r1c2'],
    ...
];

so make two loops (demo):

$(function () {
    // Declare the array holding the data
    var dataArr = [];
    // Call the PHP script that grabs all data from DB
    $.getJSON('./get_data.php', function (data) {
        var i, j, row,
        // you need to know how many columns
        columns = 3,
        // calculate how many rows
        rows = Math.ceil(data.length / columns);

        for (i = 0; i < rows; i++) {
            // clear row array
            row = [];
            for (j = 0; j < columns; j++) {
                row.push(data[i * columns + j]);
            }
            dataArr.push(row);
        }
        applyTable(dataArr);
    });

});

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

And don't trigger an "updateAll" because the table was just built.

The error you mentioned is still showing up, it looks like an bug, but it's just an unintentional message, nothing else.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top