[jsoniParticipant]

Hi Peter,

Sorry for being delay,

Yes I am using Paging mode. I have followed your documentation and written code what I have posted above. Do I need to write anything extra than this?

[jsoniParticipant]

Okay thanks a lot…… I found it and fixed it. But now filter doesn’t take effect. Means when I add value and hit filter button, nothing happen. It is not filtering anything.

Any idea?

[jsoniParticipant]

Okay I found stupid issue it was two time .js.js for both files. Now but after fixing this I got the block but data still not loading and always shows the loading image.

Any idea please?

[jsoniParticipant]

Hello,
Thanks for the quick response.

I have added all require files. This is also happening with Filtering. So just wonder what I am doing wrong!

Since I am following the same trend as your documentation. I have query file which is referring in javascript url: params and on the same php page I have the markup to render the grid.

Here is my full code

<script type='text/javascript' src='http://192.168.0.107/housefax/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxcore.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxdata.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxbuttons.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxscrollbar.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxmenu.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxlistbox.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxdropdownlist.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.selection.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.columnsresize.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.filter.js.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.sort.js.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.pager.js?ver=1.0'></script>
<script type='text/javascript' src='http://192.168.0.107/housefax/wp-content/plugins/apolloblake_clients_data/third-party/jqwidgets/jqxgrid.grouping.js?ver=1.0'></script>

HTML Element

<div class="table-responsive">
    <div id="jqxgrid">
    </div>
</div>

Javascript on the same php page

<script type="text/javascript">

    jQuery(document).ready(function() {

        var url = '<?php echo abcd_root_url('abcd_core/data_source/data_daily_reports.php'); ?>';
        var theme = 'bootstrap';
        // prepare the data
        var source =
                {
                    datatype: "json",
                    datafields: [
                        {name: 'id', type: 'intiger'},
                        {name: 'date', type: 'date'},
                        {name: 'chats_init_customer', type: 'intiger'}
                    ],
                    url: url,
                    filter: function() {
                        // update the grid and send a request to the server.
                        $("#jqxgrid").jqxGrid('updatebounddata');
                    },
                    root: 'Rows',
                    //cache: false,
                    beforeprocessing: function(data) {
                        source.totalrecords = data[0].TotalRows;
                    }
                };

        var dataAdapter = new jQuery.jqx.dataAdapter(source, {
            loadError: function(xhr, status, error) {
                alert(error);
            }
        });
        //var dataAdapter = new jQuery.jqx.dataAdapter(source);
        jQuery("#jqxgrid").jqxGrid(
                {
                    columnsresize: true,
                    source: dataAdapter,
                    width: 1170,
                    theme: theme,
                    autoheight: true,
                    filterable: true,
                    pageable: true,
                    virtualmode: true,
                    //sortable: true,
                    rendergridrows: function() {
                        return dataadapter.records;
                    },
                    columns: [
                        {text: 'ID', datafield: 'id'},
                        {text: 'Date', datafield: 'date'},
                        {text: 'Chats Init Customer', datafield: 'chats_init_customer'}
                    ]
                });

    });

</script>

Query Code in different file

$pagenum  = $_GET['pagenum'];
$pagesize = $_GET['pagesize'];
$start    = $pagenum * $pagesize;
$query    = "SELECT SQL_CALC_FOUND_ROWS * FROM hf_abcd_daily_report LIMIT $start, $pagesize";
if (isset($_GET['sortdatafield'])) {
$sortfield  = $_GET['sortdatafield'];
$sortorder  = $_GET['sortorder'];
$result     = mysql_query($query) or die("SQL Error 1: " . mysql_error());
$sql        = "SELECT FOUND_ROWS() AS <code>found_rows</code>;";
$rows       = mysql_query($sql);
$rows       = mysql_fetch_assoc($rows);
$total_rows = $rows['found_rows'];

if ($sortfield != NULL) {

if ($sortorder == "desc") {
$query = "SELECT * FROM hf_abcd_daily_report ORDER BY" . " " . $sortfield . " DESC LIMIT $start, $pagesize";
} else if ($sortorder == "asc") {
$query = "SELECT * FROM hf_abcd_daily_report ORDER BY" . " " . $sortfield . " ASC LIMIT $start, $pagesize";
}
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
}
} else {
$result     = mysql_query($query) or die("SQL Error 1: " . mysql_error());
$sql        = "SELECT FOUND_ROWS() AS <code>found_rows</code>;";
$rows       = mysql_query($sql);
$rows       = mysql_fetch_assoc($rows);
$total_rows = $rows['found_rows'];
}

while ($row = mysql_fetch_array($result, MYSQL_ASSOC))
{
$customers[] = array(
'id'                  => $row['id'],
'date'                => $row['date'],
'chats_init_customer' => $row['chats_init_customer']
);
}
$data[] = array(
'TotalRows' => $total_rows,
'Rows'      => $customers
);
echo json_encode($data);

I am able to render grid without sorting and filtering

Hope this will helps you to find what I am doing wrong.

[Author]

Posts