Table vs DataGrid - KoolReport

paulo commented on May 20, 2020

sorry, I am a bit confused. Do you recommend using Table, DataTables, or DataGrid ? They are seem to be very similar, but DataGrid seems to be better. I also have reports using DataTables, so I don't know which one is recommended. I believe I have the pro license. thank you

paulo commented on May 20, 2020

I am also trying to use pagination and filter a large data set using the following, but once I submit the table loses the paginations: <form method="post">

    <?php echo csrf_field() ?>
    <div class="text-center">
        <h1>Visitor/Sales</h1>
        <div class="row form-group">

            <div class="col-md-6 offset-md-3">
                <?php
                Select::create(array(
                    "name"=>"groupCodeID",
                    "dataStore"=>$this->dataStore("groups"),
                    "dataBind"=>array(
                        "text"=>"groupName",
                        "value"=>"groupCodeID",
                    ),
                    "attributes"=>array(
                        "class"=>"form-control"
                    )
                ));
                ?>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-primary">Look up</button>
        </div>
        <button type="submit" class="btn btn-primary exportBtn" formaction="/report/executeReport/Reporting:ClientGroupFilteredByGroupCodeExcel">Export to Excel</button>
    </div>
</form>

David Winterburn commented on May 21, 2020

Hi Paulo,

Table widget is a part of the KoolReport core framework while DataTables widget is one of the DataGrid package. Table is our in-house solution for data table while DataTables utilizes the famous jQuery DataTables with its many options and plugins.

Now regarding your question about keeping pagination or state in a table when submitting please try this option of DataTables:

\koolreport\datagrid\DataTables::create(array(
    ...
    "options" => array(
        "stateSave" => true
    )
));

Let us know how it works for you. Thanks!

paulo commented on May 21, 2020

thank you. So Table is great, but DataTables has more features, functionalities and more flexible, correct? ,

I tried all this

DataTables::create(array(
        "dataStore" => $this->dataStore('ClientVisitorList'),
        "options"=>array(
            "searching"=>true,
            "fixedHeader"=>true,
            "paging"=>true,
            "pageLength" => 25,
            "showFooter"=>true,
            "stateSave" => true

        ),

the stateSave worked. IT seems that I still have to wait to load the whole things before the data is presented with pagination which is very slow and defeats the purpose of the pagination in this case.

First time it loads the page is blank because my default is zero through the defaultParamValues So, I tried the server side option "serverSide"=>true, but I am getting the following error: DataTables warning: table id=datatables5ec686587305c1 - Ajax error. For more information about this error, please see http://datatables.net/tn/7

I'm using Laravel, and my router is set to Get/Post Route::match(array('GET','POST'),'report/executeReport/{id}', 'Admin\AdminReportController@executeReport');

I tried to follow the post https://www.koolreport.com/forum/topics/1147 I've added use \koolreport\clients\jQuery; to the class and also added

  "showFooter"=>true,
        "serverSide"=>true,
        "themeBase"=>"bs4",
        "method" => "post",

when I first load, I get "Failed to load resource: the server responded with a status of 419 (unknown status)" Once and select a code and click on look up, I get the following error in browser network dev tool says POST http://localhost:8000/report/executeReport/Reporting:ClientGroupFilteredByGroupCode 419 (unknown status)

thank you very much for your help. thanks

David Winterburn commented on May 22, 2020

Hi Paulo,

By default, DataTables loads all data to clients, which could be slow if there's a lot of data. So in that case you could try DataTables' serverSide property. In order to use serverSide it's advisable to set DataTables' unique name property like this:

DataTables::create(array(
    "name" => "uniqueDataTables1",
    "serverSide" => true,
    "method" => "post",
    ...

The reason is that DataTables needs a defined unique name to update its data onto its elements. Please try this and let us know how it works for you. Thanks!

paulo commented on May 22, 2020

thanks David. I did that, but I am still getting this error: "DataTables warning: table id=uniqueDataTables1- Ajax error. For more information about this error, please see http://datatables.net/tn/7" I also added: <meta name="csrf-token" content="{{ csrf_token() }}"> ....

<script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>

but the "DataTables warning: table id=uniqueDataTables1- Ajax error. For more information about this error, please see http://datatables.net/tn/7" is still coming up and nothing loads...

thanks for helping.

David Winterburn commented on May 25, 2020

Oh, it seems you still have problem with serverSide in Laravel even after adding CSRF token to ajax.

There could be another reason is that if you use DataTables' method=post you must add post to your route for the report as well. For example:

Route::get('myReport', 'UserController@myReport');
Route::post('myReport', 'UserController@myReport');

If this still doesn't help, please go to your report, press F12 to open dev tools, navigate to tab Network, click XHR below. Then change page or filter your server-sided DataTables to see any error message in the xhr's response.

paulo commented on May 26, 2020

thank you David. I added:

Route::get('report/executeReport/{id}', 'Admin\\AdminReportController@executeReport');
Route::post('report/executeReport/{id}', 'Admin\\AdminReportController@executeReport');

to my Laravel routes. And I do have:

<html>
<head>
    <title>Client/Group and Contact By Group Code </title>


    <meta name="csrf-token" content="{{ csrf_token() }}">

</head>

<body>
      <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
        </script>

I am still getting this error:

DataTables warning: table id=ClientVisitorList - Ajax error. For more information about this error, please see http://datatables.net/tn/7

The ERROR is:

DevTools failed to load SourceMap: Could not load content for http://localhost:8000/koolreport_assets/699317815/bootstrap.bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

AND
POST http://localhost:8000/report/executeReport/Reporting:ClientGroupFilteredByGroupCode 419 (unknown status)
jquery.min.js:2 
	send	@	jquery.min.js:2
ajax	@	jquery.min.js:2
sa	@	datatables.min.js:49
lb	@	datatables.min.js:49
P	@	datatables.min.js:41
T	@	datatables.min.js:43
ha	@	datatables.min.js:60
e	@	datatables.min.js:105
b	@	datatables.min.js:85
Jb	@	datatables.min.js:86
(anonymous)	@	datatables.min.js:105
each	@	jquery.min.js:2
...
	registerScript	@	KoolReport.js:78
(anonymous)	@	KoolReport.js:40
js	@	KoolReport.js:39
resources	@	KoolReport.js:12
(anonymous)	@	Reporting:ClientGrou…teredByGroupCode:10

thank you

KoolReport's Forum

Table vs DataGrid #1454

Build Your Excellent Data Report