how to add php variable(s)/arrays in Javascript function ( in jsGrid({ controller }) )

Question

I am using http://js-grid.com for my php application. I choose this library for inline edit/update/add/delete. Now I want to view $variables or $array data(s) which will come from database. Here is the script

<script>
    $(function() {
        $("#jsGrid").jsGrid({
            pageButtonCount: 5,
            deleteConfirm: "Do you really want to delete the client?",
            controller: db,
            fields: [
                { name: "Name", type: "text", width: 150 },
                { name: "Age", type: "number", width: 50 },
                { type: "control" }
            ]
        });

    });
</script>

in above code I got a property called controller which is rendering db (data). db is coming from a file db.js. The file looks as below:

(function() {
var db = {
    loadData: function(filter) {
        return $.grep(this.clients, function(client) {
            return (!filter.Name || client.Name.indexOf(filter.Name) > -1)
                && (!filter.Age || client.Age === filter.Age)
                && (!filter.Address || client.Address.indexOf(filter.Address) > -1)
                && (!filter.Country || client.Country === filter.Country)
                && (filter.Married === undefined || client.Married === filter.Married);
        });
    },
    insertItem: function(insertingClient) {
        this.clients.push(insertingClient);
    },
    updateItem: function(updatingClient) { },
    deleteItem: function(deletingClient) {
        var clientIndex = $.inArray(deletingClient, this.clients);
        this.clients.splice(clientIndex, 1);
    }
};

window.db = db;

db.countries = [
    { Name: "", Id: 0 },
    { Name: "United States", Id: 1 },
];

db.clients = [
    {
        "Name": "Otto Clay",
        "Age": 61,
    },
    {
        "Name": "Connor Johnston",
        "Age": 73,
    }
];

}()); 

Also I followed the github docs https://github.com/tabalinas/jsgrid-php. But I can not figure out that how do I place my php $variable or $array in my views as well as javaScripts.

What I want to : I want to call $array into the section of javaScripts as controller : db.

Error: When I use controller: <?php echo $array; ?>', its returning null cause I can not call as they called as default fromdb.js`

Please help me out that how may I call php $variable or $array instead of controller: db in javaScript Thanks in advanced.

Answer 1

The controller option defines behavior, you cannot put static data there. But there is an option data where you can put static values (like in your example from php).

Another option for you is to define controller.loadData:

controller: {
    loadData: function() {
        return $.ajax({
            type: "GET",
            url: "/clients/"
        });
    },

and on the server you serve the requested information

switch($_SERVER["REQUEST_METHOD"]) {
    case "GET":
        $result = $clients->getAll();
        break;
    ...
}

header("Content-Type: application/json");
echo json_encode($result);

You can find the implementation in the jsgrid-php repo.