I'm trying to work with footable bootstrap plugin

[mahenda]

I have php file which return data in json format

 

<?php

include_once('con.php');
$mydata = array();
$data = $con -> prepare('SELECT * FROM user');
$data -> execute();
while($result = $data->fetch()) {
    $mydata[] = $result['id'];
    $mydata[] = $result['first_name'];
    $mydata[] = $result['last_name'];
}
echo json_encode($mydata);
?>

 

the problem is the footable require both columns and rows how to get colums?

 

$(document).ready( function() {
	var ft = FooTable.init('#user', {
		columns: $.get("how to get the table column"),
		rows: $.get("row.php")
	});
});

There is no documentation about how to do that with php

look here https://fooplugins.github.io/FooTable/docs/examples/advanced/ajax.html

 

 

 

 

 

[Barand]

Is this close to what you want?

$mydata = [];
$cols = [];
$rows = [];

$data = $pdo -> query('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       ');
$row = $data->fetch();
$cols = array_keys($row);
do {
    $rows[] = array_values($row);
} while ($row = $data->fetch());

$mydata['columns'] = $cols;
$mydata['rows'] = $rows;

echo json_encode($mydata);

givng

$mydata = Array
(
    [columns] => Array
        (
            [0] => id
            [1] => firstname
            [2] => lastname
        )

    [rows] => Array
        (
            [0] => Array
                (
                    [0] => 1
                    [1] => Peter
                    [2] => Dowt
                )

            [1] => Array
                (
                    [0] => 2
                    [1] => Laura
                    [2] => Norder
                )

            [2] => Array
                (
                    [0] => 3
                    [1] => Tom
                    [2] => DiCanari
                )

        )

)

JSON...

{"columns":["id","firstname","lastname"],"rows":[[1,"Peter","Dowt"],[2,"Laura","Norder"],[3,"Tom","DiCanari"]]} 

 

[mahenda]

49 minutes ago, Barand said:

Is this close to what you want?

$mydata = [];
$cols = [];
$rows = [];

$data = $pdo -> query('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       ');
$row = $data->fetch();
$cols = array_keys($row);
do {
    $rows[] = array_values($row);
} while ($row = $data->fetch());

$mydata['columns'] = $cols;
$mydata['rows'] = $rows;

echo json_encode($mydata);

givng

$mydata = Array
(
    [columns] => Array
        (
            [0] => id
            [1] => firstname
            [2] => lastname
        )

    [rows] => Array
        (
            [0] => Array
                (
                    [0] => 1
                    [1] => Peter
                    [2] => Dowt
                )

            [1] => Array
                (
                    [0] => 2
                    [1] => Laura
                    [2] => Norder
                )

            [2] => Array
                (
                    [0] => 3
                    [1] => Tom
                    [2] => DiCanari
                )

        )

)

JSON...

{"columns":["id","firstname","lastname"],"rows":[[1,"Peter","Dowt"],[2,"Laura","Norder"],[3,"Tom","DiCanari"]]} 

 

jquery-3.3.1.min.js:3818 jQuery.Deferred exception: Cannot use 'in' operator to search for 'length' in {"columns":["id","first_name","last_name"],"rows":[[1,"Bob","Johnson"],[2,"Paul","Prince"],[3,"Jimmy","Jackson"]]} 

  at isArrayLike (http://localhost/aps/assets/vendor/jquery-3.3.1.min.js:489:33)
    at Function.map (http://localhost/aps/assets/vendor/jquery-3.3.1.min.js:440:8)
    at c.parseFinalize (http://localhost/aps/assets/vendor/footable/js/footable.min.js:9:2668)
    at Object.<anonymous> (http://localhost/aps/assets/vendor/footable/js/footable.min.js:9:2445)
    at mightThrow (http://localhost/aps/assets/vendor/jquery-3.3.1.min.js:3534:29)
    at process (http://localhost/aps/assets/vendor/jquery-3.3.1.min.js:3602:12) undefined
jQuery.Deferred.exceptionHook @ jquery-3.3.1.min.js:3818
 

[Barand]

I take it that's a "No".

[mahenda]

7 minutes ago, Barand said:

I take it that's a "No".

 It was my fault, i troubleshooted it but the problem is

FooTable: unhandled error thrown during initialization. Error: No columns supplied.
    at c.parseFinalize (footable.min.js:8)
    at Object.<anonymous> (footable.min.js:8)
    at mightThrow (jquery-3.3.1.min.js:3534)
    at process (jquery-3.3.1.min.js:3602)

 

what does it mean, please refer on the previous jquery

 

 

 

[mahenda]

1 hour ago, Barand said:

Is this close to what you want?

$mydata = [];
$cols = [];
$rows = [];

$data = $pdo -> query('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       ');
$row = $data->fetch();
$cols = array_keys($row);
do {
    $rows[] = array_values($row);
} while ($row = $data->fetch());

$mydata['columns'] = $cols;
$mydata['rows'] = $rows;

echo json_encode($mydata);

givng

$mydata = Array
(
    [columns] => Array
        (
            [0] => id
            [1] => firstname
            [2] => lastname
        )

    [rows] => Array
        (
            [0] => Array
                (
                    [0] => 1
                    [1] => Peter
                    [2] => Dowt
                )

            [1] => Array
                (
                    [0] => 2
                    [1] => Laura
                    [2] => Norder
                )

            [2] => Array
                (
                    [0] => 3
                    [1] => Tom
                    [2] => DiCanari
                )

        )

)

JSON...

{"columns":["id","firstname","lastname"],"rows":[[1,"Peter","Dowt"],[2,"Laura","Norder"],[3,"Tom","DiCanari"]]} 

 

I saw this statement The problem was that, when reading a file, the promise passed to Footable resolves as a string array instead of an array of JavaScript objects containing row data.

here https://stackoverflow.com/questions/32960406/footable-v3-ajax-data-loading-error-no-columns-supplied

 

what does this mean

[Barand]

Plan B, giving

{
"columns":[{"name":"id","title":"id"},
            {"name":"firstname","title":"firstname"},
            {"name":"lastname","title":"lastname"}],
"rows":[{"id":1,"firstname":"Peter","lastname":"Dowt"},
        {"id":2,"firstname":"Laura","lastname":"Norder"},
        {"id":3,"firstname":"Tom","lastname":"DiCanari"}]
}

Code

$mydata = [];
$cols = [];
$rows = [];

$data = $pdo -> query('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       LIMIT 3
                       ');
$row = $data->fetch(PDO::FETCH_OBJ);
$keys = array_keys((array)$row);
foreach ($keys as $key) {
    $cols[] = (object)[ 'name'=>$key, 'title'=>$key ];
}

do {
    $rows[] = $row;
} while ($row = $data->fetch(PDO::FETCH_OBJ));

$mydata['columns'] = $cols;
$mydata['rows'] = $rows;

echo json_encode($mydata);

 

[mahenda]

On 3/27/2021 at 3:55 AM, Barand said:

Plan B, giving

{
"columns":[{"name":"id","title":"id"},
            {"name":"firstname","title":"firstname"},
            {"name":"lastname","title":"lastname"}],
"rows":[{"id":1,"firstname":"Peter","lastname":"Dowt"},
        {"id":2,"firstname":"Laura","lastname":"Norder"},
        {"id":3,"firstname":"Tom","lastname":"DiCanari"}]
}

 

How to remove these keyword columns and rows in php i.e

 

Code

[{"name":"id","title":"id"},
            {"name":"firstname","title":"firstname"},
            {"name":"lastname","title":"lastname"}],

[{"id":1,"firstname":"Peter","lastname":"Dowt"},
        {"id":2,"firstname":"Laura","lastname":"Norder"},
        {"id":3,"firstname":"Tom","lastname":"DiCanari"}]

 

 

 

 

[mahenda]

How to remove these keyword columns and rows in php i.e

 

Code

[{"name":"id","title":"id"}, {"name":"firstname","title":"firstname"}, {"name":"lastname","title":"lastname"}],

 

[{"id":1,"firstname":"Peter","lastname":"Dowt"}, {"id":2,"firstname":"Laura","lastname":"Norder"}, {"id":3,"firstname":"Tom","lastname":"DiCanari"}]

Edited March 28, 2021 by mahenda

[Barand]

The format I produced was the same as the format in the link you posted, that is

$('.table').footable({
    "columns": [{"name":"col1", "title": "Col 1"},
                {"name":"col2", "title": "Col 2"} ],
    "rows": [{"col1":"abc", "col2":"def"},
                     {"col1":"ghi", "col2":"jkl"}, 
                     {"col1":"ghi", "col2":"jkl"}, 
                     {"col1":"ghi", "col2":"jkl"}, 
                     {"col1":"ghi", "col2":"jkl"}]
});

If that isn't what you need then you need to tell us what is -  no more guessing.

[mahenda]

5 hours ago, Barand said:

The format I produced was the same as the format in the link you posted, that is

$('.table').footable({
    "columns": [{"name":"col1", "title": "Col 1"},
                {"name":"col2", "title": "Col 2"} ],
    "rows": [{"col1":"abc", "col2":"def"},
                     {"col1":"ghi", "col2":"jkl"}, 
                     {"col1":"ghi", "col2":"jkl"}, 
                     {"col1":"ghi", "col2":"jkl"}, 
                     {"col1":"ghi", "col2":"jkl"}]
});

If that isn't what you need then you need to tell us what is -  no more guessing.

 

Of course this is a footable format, but keep in mind that the JavaScript side requires both rows and columns that have already been defined as a property in the plugin, now the problem is how to integrate a PHP file with the JSON data to replace those columns.json and row.json file, look here

	jQuery(function($){ $('.table').footable({ "columns": $.get('columns.json'), "rows": $.get('rows.json') }); });
	

 

I want 

	jQuery(function($){ $('.table').footable({ "columns": $.get('columns.php'), "rows": $.get('rows.php') }); });
	

 

But we remember our php file produce both rows and columns at the same time i.e

	{ "columns":[{"name":"id","title":"id"}, {"name":"firstname","title":"firstname"}, {"name":"lastname","title":"lastname"}], "rows":[{"id":1,"firstname":"Peter","lastname":"Dowt"}, {"id":2,"firstname":"Laura","lastname":"Norder"}, {"id":3,"firstname":"Tom","lastname":"DiCanari"}] }
	

 

The data above came with keyword columns and rows, I think this is a problem because there is no data are displayed, I think they were supposed to come as

	//first columns php
	[{"name":"id","title":"id"}, {"name":"firstname","title":"firstname"}, {"name":"lastname","title":"lastname"}], 
	////first rows php
	[{"id":1,"firstname":"Peter","lastname":"Dowt"}, {"id":2,"firstname":"Laura","lastname":"Norder"}, {"id":3,"firstname":"Tom","lastname":"DiCanari"}]
	

 

and then we replace the above file  on

 

	jQuery(function($){ $('.table').footable({ "columns": $.get('columns.php'), "rows": $.get('rows.php') }); });
	

 

May be there is another way, but my altenative was a datatable which found at datatable.net, but when i use ajax the pagination link not working look at this thread 

 

Edited March 29, 2021 by mahenda

[mahenda]

I want get the data in this format please

 

//first columns php
[{"name":"id","title":"id"}, {"name":"firstname","title":"firstname"}, {"name":"lastname","title":"lastname"}], 
//first rows php
[{"id":1,"firstname":"Peter","lastname":"Dowt"}, {"id":2,"firstname":"Laura","lastname":"Norder"}, {"id":3,"firstname":"Tom","lastname":"DiCanari"}]


but when I'm using my first code
i get

//first rows php
[1,"Peter","Dowt", 2,"Laura","Norder", 3,"Tom","DiCanari"]

 

[Barand]

Perhaps you could explain how the format my last posted code produced differs from that you have just posted above.

(strcmp() tells me they are identical.)

[mahenda]

39 minutes ago, Barand said:

Perhaps you could explain how the format my last posted code produced differs from that you have just posted above.

(strcmp() tells me they are identical.)

Thank you for your help, the code you provide me it work and display data in server side on console but it was never working in the view table, but for now I modified the code to give out something like 

//first columns php

[{"name":"id","title":"id"}, {"name":"firstname","title":"firstname"}, {"name":"lastname","title":"lastname"}],

 

//first rows

php [{"id":1,"firstname":"Peter","lastname":"Dowt"}, {"id":2,"firstname":"Laura","lastname":"Norder"}, {"id":3,"firstname":"Tom","lastname":"DiCanari"}]

 

then it worked but i have to ask you last questions

 

how can i use the same php file for both columns and rows, 

 

Also how to add custom link in footable, just when one click it will open other page and there i will do something

 

look on how i modified the your code

 

REMEMBER: You gave out single php file butt i broke it like;

//you provided
$mydata = [];
$cols = [];
$rows = [];

$data = $pdo -> query('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       LIMIT 3
                       ');
$row = $data->fetch(PDO::FETCH_OBJ);
$keys = array_keys((array)$row);
foreach ($keys as $key) {
    $cols[] = (object)[ 'name'=>$key, 'title'=>$key ];
}

do {
    $rows[] = $row;
} while ($row = $data->fetch(PDO::FETCH_OBJ));

$mydata['columns'] = $cols;
$mydata['rows'] = $rows;

echo json_encode($mydata);



//First thing I did
//I created php file for fetching a columns only

$mydata = [];
$cols = [];

$data = $pdo -> query('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       LIMIT 3
                       ');
$row = $data->fetch(PDO::FETCH_OBJ);
$keys = array_keys((array)$row);
foreach ($keys as $key) {
    $cols[] = [ 'name'=>$key, 'title'=>$key ];
}
$mydata = $cols;

echo json_encode($mydata);
//do not forget header('Content-Type: application/json');



//second thing I did
//I created php file for fetching a columns only

//you provided
		$mydata = array();
        $data = $pdo -> prepare('SELECT user_id as id
                            , firstname
                            , lastname
                       FROM user
                       LIMIT 3
                       ');
        $data -> execute();
        while($result = $data->fetch()) {
            $mydata[] = array(
                'id' => $result['id'],
                'firstname' => $result['firstname'],
                'lastname' => $result['lastname']
				//but how to add some button here since the columns are coming directry from database
		'view' => '<button type="button" name="view" id="'.$result["id"].'" class="btn btn-secondary btn-xs rounded-circle delete" data-toggle="tooltip" data-placement="top" title="view"><i class="zmdi zmdi-more"></i></button>';
            );
        }
        echo json_encode($mydata);

 

Edited March 29, 2021 by mahenda

[mahenda]

And what about this question

 

[Barand]

3 hours ago, mahenda said:

how can i use the same php file for both columns and rows, 

I gave you a single php file which gets both columns and rows.

You broke it down into two php files and then ask how to do it with one ???????

Sorry, but you have completely lost me with what you are doing. I give up.

[mahenda]

48 minutes ago, Barand said:

I gave you a single php file which gets both columns and rows.

You broke it down into two php files and then ask how to do it with one ???????

Sorry, but you have completely lost me with what you are doing. I give up.

Don't give up buddy,  I know you used a single file but remember the footable plugin requires two files, one which provide columns and another which provides rows, so the single one refused to display the data to the view  until I broke that to two PHP files the one with rows and another with columns, it worked but the one issue here is how to add links on each rows on the table?

 

have you tested it practically with footable not only php script?

Edited March 29, 2021 by mahenda

[Barand]

Plan C

A single script with a single ajax call but the columns and rows are json_encoded separately this time. giving

Code...

if (isset($_GET['ajax'])) {
        $mydata = [];
        $cols = [];
        $rows = [];

        $data = $pdo->query('SELECT user_id as id
                                    , firstname
                                    , lastname
                               FROM user
                               LIMIT 3
                               ');
        $row = $data->fetch(PDO::FETCH_OBJ);
        $keys = array_keys((array)$row);
        foreach ($keys as $key) {
            $cols[] = (object)[ 'name'=>$key, 'title'=>$key ];
        }

        do {
            $rows[] = $row;
        } while ($row = $data->fetch(PDO::FETCH_OBJ));

        $mydata['columns'] = json_encode($cols);
        $mydata['rows'] = json_encode($rows);

        exit(json_encode($mydata));
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<!-- link to jquery functions -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type='text/javascript'>
    $().ready( function() {
        $("#get-data").click(function() {
            $.get(
                "",
                {"ajax":1},
                function(resp) {
                    $("#coldata").html(resp.columns)
                    $("#rowdata").html(resp.rows)
                },
                "JSON"
            )
        })
    })
</script>

</head>
<body>
<span id="get-data" class="w3-button w3-blue w3-margin">Get Data</span>
<h3>Columns</h3>
<div id="coldata" class='data'></div>

<h3>Rows</h3>
<div id="rowdata" class='data'></div>
</body>
</html>

 

[mahenda]

13 minutes ago, Barand said:

Plan C

A single script with a single ajax call but the columns and rows are json_encoded separately this time. giving

Code...

if (isset($_GET['ajax'])) {
        $mydata = [];
        $cols = [];
        $rows = [];

        $data = $pdo->query('SELECT user_id as id
                                    , firstname
                                    , lastname
                               FROM user
                               LIMIT 3
                               ');
        $row = $data->fetch(PDO::FETCH_OBJ);
        $keys = array_keys((array)$row);
        foreach ($keys as $key) {
            $cols[] = (object)[ 'name'=>$key, 'title'=>$key ];
        }

        do {
            $rows[] = $row;
        } while ($row = $data->fetch(PDO::FETCH_OBJ));

        $mydata['columns'] = json_encode($cols);
        $mydata['rows'] = json_encode($rows);

        exit(json_encode($mydata));
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<!-- link to jquery functions -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type='text/javascript'>
    $().ready( function() {
        $("#get-data").click(function() {
            $.get(
                "",
                {"ajax":1},
                function(resp) {
                    $("#coldata").html(resp.columns)
                    $("#rowdata").html(resp.rows)
                },
                "JSON"
            )
        })
    })
</script>

</head>
<body>
<span id="get-data" class="w3-button w3-blue w3-margin">Get Data</span>
<h3>Columns</h3>
<div id="coldata" class='data'></div>

<h3>Rows</h3>
<div id="rowdata" class='data'></div>
</body>
</html>

 

thanks

[Barand]

Plan D

Same PHP code as Plan B but with a variation to the ajax response handling

 This gives...

Code...

if (isset($_GET['ajax'])) {
        $mydata = [];
        $cols = [];
        $rows = [];

        $data = $pdo->query('SELECT user_id as id
                                    , firstname
                                    , lastname
                               FROM user
                               LIMIT 3
                               ');
        $row = $data->fetch(PDO::FETCH_OBJ);
        $keys = array_keys((array)$row);
        foreach ($keys as $key) {
            $cols[] = (object)[ 'name'=>$key, 'title'=>$key ];
        }

        do {
            $rows[] = $row;
        } while ($row = $data->fetch(PDO::FETCH_OBJ));

        $mydata['columns'] = $cols;
        $mydata['rows'] = $rows;

        exit(json_encode($mydata));
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta http-equiv="content-language" content="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<!-- link to jquery functions -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type='text/javascript'>
    $().ready( function() {
        $("#get-data").click(function() {
            $.get(
                "",
                {"ajax":1},
                function(resp) {
                    $("#coldata").html(JSON.stringify(resp.columns))
                    $("#rowdata").html(JSON.stringify(resp.rows))
                    $("#crdata").html(JSON.stringify(resp))
                },
                "JSON"
            )
        })
    })
</script>
<style type='text/css'>
   .data {
       font-family: monospace;
   }
</style>
</head>
<body>
<span id="get-data" class="w3-button w3-blue w3-margin">Get Data</span>
<div class="w3-container w3-margin">
    <h3>Columns</h3>
    <div id="coldata" class='data'></div>
    <h3>Rows</h3>
    <div id="rowdata" class='data'></div>
    <h3>All</h3>
    <div id="crdata" class='data'></div>
</div>
</body>
</html>

There should now be something you can use, in whole or in part