Crud: Pagination using AJAX

Created on 15 Jun 2016  ·  19Comments  ·  Source: Laravel-Backpack/CRUD

Is this considered?
Right now all rows are queried.

With thousands of rows and custom columns? this might get pretty heavy...

help wanted urgent

Most helpful comment

Hi guys,

I've just finished AJAX pagination, in CRUD 3.0.5 you just need to declare this in your EntityCrudController:

$this->crud->enableAjaxTable();

You need to do a composer update to get it. Right now:

  • it loads blazing fast with big data sets
  • all columns show the info
  • search works for most columns
  • details_row works
  • addClause works
  • buttons work

While it's working and stuff, I did _not_ make this the primary list view, because there are some drawbacks I can't figure out how to solve:

1) Search doesn't work as expected for all columns.
In both static and ajax tables you can show 1-n and n-n relationships, but you can only search within them in the static table, because there it only searches within the table text. In the ajax table you cannot do that, because it searches within the actual DB table. I consider this a big downside for UX - people won't understand why the results don't show up.

2) Some columns types don't fully work.
The column types that place information on their parent td will still show stuff, but the information on the td will be ignored. Right now, only the date and datetime columns are in this situation, but it's still a bummer.

I see no good solution for either of these, so feel free to help out if you do.

However, these _are_ minor problems in the big picture, and having _some_ AJAX tables is better than none. You can use it, as long as you know the drawbacks.

Cheers!

All 19 comments

Yes, in the future we should move from HTML Datatables to AJAX Datatables. The change will be invisible, though, and it will not imply any API change. It implies:

  • a new route, to get entity results based on query/start/end ( /list-entries, maybe?);
  • a new method in CrudController that handles the above (listEntries, maybe?);
  • a change in the list view - instead of constructing an HTML table, just give the datatables the URL to the results;
  • a change in CrudController::index() to stop getting all entries before the page loads;

Though I've thought about it and it is planned somewhere along the road, I haven't had time to do it myself. I trust I, you or someone else will do this the first time they'll be confronted with the situation of having a CRUD with hundreds or thousants of entries.

Do you need it now?

I was actually going to inquire about this myself—my first project with this is growing and starts at about 1,500 rows in the main table. On a pretty optimized machine I'm already seeing that page load taking ~5 seconds, so I'm pretty interested in this.

That said, as it stands, it's an acceptable tradeoff for instant page switching, sorting, and search.

with 4.000 rows it breaks firefox and i'm up to migrating 16.000 users....

Damn. 5 seconds is a quite a lot for 1,500 rows. And breaking at 4,000 is no good either.

I've done some fast research, seems like this is the only option for large datasets in Datatables: server-side processing.

Unfortunately, the soonest I can work on this will be the end of next week, as the projects I'm working on right now won't have data sets that big. Can any of you do it by then and submit a pull request? I promise the first beer is on me next time I'm in your country or you're in Romania :-)

Also, on second though, maybe the naming should not be list-entries, but:

  • route: product/search
  • method: CrudController::search($string, $start, $end)

What are your thoughts on this?

That you should watch soccer tight now ;)

:-)) I am. Multitasking :-)

Hi,

Any rough estimate regarding which upcoming future release is this change planned for? With the recent release, the package features have increased even more - Congrats and thanks for that. It would be great if this small niggling performance issue can also be resolved in the near future.

Hi.
What is a progress on this bug?
I really like this admin panel, but I cant use it for my project because I have tables with near 20000 of rows.

Hi @rzaglinskij , @vishalbhide ,

I expect this feature to be completed at the end of next week. It will be a non-breaking update to 3.0 and the only thing you'll need to do is specify something like:

$this->crud->enableAjaxTable($array_of_columns_to_search_in);

This will change from using the list.blade.php view to the new list_ajax.blade.php view.

If it's not too late for you then, you can continue using Backpack, knowing that in a few days you'll just need to add one line to the EntityCrudControllers that need AJAX, and that's it.

Please note though: the AJAX Table View might NOT be able to search within connected entities, only through that table's columns. Still trying to figure that one out.

Cheers!

thanks for the fast reply.

2016-07-27 12:35 GMT+03:00 Cristian Tabacitu [email protected]:

Hi @rzaglinskij https://github.com/rzaglinskij , @vishalbhide
https://github.com/vishalbhide ,

I expect this feature to be completed at the end of next week. It will be
a non-breaking update to 3.0 and the only thing you'll need to do is
specify something like:

$this->crud->enableAjaxTable($array_of_columns_to_search_in);

This will change from using the list.blade.php view to the new
list_ajax.blade.php view.

If it's not too late for you then, you can continue using Backpack,
knowing that in a few days you'll just need to add one line to the
EntityCrudControllers that need AJAX, and that's it.

_Please note though_: the AJAX Table View might NOT be able to search
within connected entities, only through that table's columns. Still trying
to figure that one out.

Cheers!


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/Laravel-Backpack/CRUD/issues/36#issuecomment-235536420,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAn0ld9hMOaee3MhUl8utymN4Bnc6oFTks5qZyZtgaJpZM4I2KNu
.


Заглинский Роман
+38(063) 7-889-889
skype: roman.zaglinskij

Hi guys,

I've just finished AJAX pagination, in CRUD 3.0.5 you just need to declare this in your EntityCrudController:

$this->crud->enableAjaxTable();

You need to do a composer update to get it. Right now:

  • it loads blazing fast with big data sets
  • all columns show the info
  • search works for most columns
  • details_row works
  • addClause works
  • buttons work

While it's working and stuff, I did _not_ make this the primary list view, because there are some drawbacks I can't figure out how to solve:

1) Search doesn't work as expected for all columns.
In both static and ajax tables you can show 1-n and n-n relationships, but you can only search within them in the static table, because there it only searches within the table text. In the ajax table you cannot do that, because it searches within the actual DB table. I consider this a big downside for UX - people won't understand why the results don't show up.

2) Some columns types don't fully work.
The column types that place information on their parent td will still show stuff, but the information on the td will be ignored. Right now, only the date and datetime columns are in this situation, but it's still a bummer.

I see no good solution for either of these, so feel free to help out if you do.

However, these _are_ minor problems in the big picture, and having _some_ AJAX tables is better than none. You can use it, as long as you know the drawbacks.

Cheers!

Thanks for the prompt response, and working on a weekend to get this out! Will check this out and give you feedback.

good work. thanks.

Hey @tabacitu , this was a HUGE feature for me. I just started running into issues with speed and large datasets. It was nice to see a solution in CRUD 3.0.5. Thank you for your hard work! Updating composer now... I'll let you know if I run into any problems.

This was a great addition for me as well. I have tested it, and it works well for my current use case. Thanks a lot for all the hard work!

:-) very glad to hear that, guys. Your involvement and feedback really makes this worthwhile. 🍻

Quick follow up on this. It seems to have problems if you want to eager load relationships. At that point setting the id so the buttons work fails since id is ambiguous. Is there a way to use an ajax table and eager load relationships?

my crud controller is not returning me anything. I am getting a blank page when used $this->crud->enableAjaxTable();

@krtrth all tables are not AjaxDataTables. Since Backpack\CRUD 3.3 $this->crud->enableAjaxTable(); does nothing, and it will soon be deprecated.

I suspect you're having a different issue - probably misconfiguration.

Was this page helpful?
0 / 5 - 0 ratings