Search code examples
javascriptphpajaxdatabasejqgrid

Display a database table in a jqGrid

I'm desperately trying to display the data from my database inside a jqGrid I created, but I don't really understand how it works.

I read thoroughly the documentation about jqGrid and tried to adapt the demos of the official website but I can't find a simple way to just replace the "data" option of the grid with a PHP/MySQL or AJAX script. Here is my code:

    <script>
        $(function (){
            $("#grid").jqGrid({
                colNames: ["ID", "Context", "IP", "Community", "Modèle", "Uptime", "Version Soft", "Version Patch", "Date d'ajout", "Date modif", "Refresh"],
                colModel: [
                    {name:'id', index:'id', width:60, sorttype:'int', align:'center'},
                    {name:'context', index:'context', width:130, align:'center'},
                    {name:'ip', index:'ip', width:150, align:'center'},
                    {name:'community', index:'community', width:100, align:'center'},
                    {name:'modele', index:'modele', width:80, align:'center'},
                    {name:'uptime', index:'uptime', width:150, align:'center'},
                    {name:'soft', index:'soft', width:150, align:'center'},
                    {name:'patch', index:'patch', width:150, align:'center'},
                    {name:'ajout', index:'ajout', width:100, sorttype:'date', align:'center'},
                    {name:'modif', index:'modif', width:100, sorttype:'date', align:'center'},
                    {name:'refresh', index:'refresh', width:70, align:'center', formatter:refresh_Button}
                ],
                data: [
                    {id:"1",context:"LAB",ip:"192.168.xx.xx",community:"public",modele:"S57",ajout:"20-11-2017"}
                ],
                caption: "Equipements disponibles :",
                sortname: 'id',
                sortorder:"desc",
                rowNum:20,
                rowList:[20,40,60],
                pager:'#yolo'
            });
            function refresh_Button(cellvalue, options, rowobject){
                return '<button type="button" onclick="">Go</button>';

            }

        });
    </script>
</head>

<body>
<table id="grid"></table>
<div id="yolo"></div>
</body>
</html>

Does anyone know how to do something like this ?

Solution

  • Just in case people want to know the answer, you have to :

    1. add these parameters in your jqGrid options :

    url:"your_ajax_page.php"

    mtype:"POST" //or GET

    datatype:"json"

    loadonce:"true"

    1. create your_ajax_page.php and basically copy the "loadonce" demo on the official jqGrid demo website (which is currently down).

    2. after you have linked your database data and your jqGrid rows, add "echo json_encode($data_array)" at the bottom of the page

    3. This should be it, hope it helped you