Jump to content

I'm trying to work with footable bootstrap plugin


Recommended Posts

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

 

 

 

 

 

Link to post
Share on other sites

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"]]} 

 

Link to post
Share on other sites
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
 

Link to post
Share on other sites
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

 

 

 

Link to post
Share on other sites
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

Link to post
Share on other sites

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

 

Link to post
Share on other sites
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"}]

 

 

 

 

Link to post
Share on other sites
Posted (edited)

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 by mahenda
Link to post
Share on other sites

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.

Link to post
Share on other sites
Posted (edited)
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 by mahenda
Link to post
Share on other sites

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"]

 

Link to post
Share on other sites

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.)

Link to post
Share on other sites
Posted (edited)
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 by mahenda
Link to post
Share on other sites
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.

Link to post
Share on other sites
Posted (edited)
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 by mahenda
Link to post
Share on other sites

Plan C

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

image.thumb.png.035020d2a73ca0a4963ed633af6ed5b3.png

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 1
Link to post
Share on other sites
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

image.thumb.png.035020d2a73ca0a4963ed633af6ed5b3.png

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

Link to post
Share on other sites

Plan D

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

 This gives...

image.thumb.png.e2e832c02401329fa67e0d0ba42689fa.png

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

  • Like 1
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.