Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination using AJAX #36

Closed
axyr opened this issue Jun 15, 2016 · 19 comments
Closed

Pagination using AJAX #36

axyr opened this issue Jun 15, 2016 · 19 comments
Assignees
Labels

Comments

@axyr
Copy link

axyr commented Jun 15, 2016

Is this considered?
Right now all rows are queried.

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

@tabacitu
Copy link
Member

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?

@tabacitu tabacitu changed the title Pagination Pagination using AJAX Jun 15, 2016
@codydh
Copy link

codydh commented Jun 15, 2016

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.

@tabacitu tabacitu added this to the 2.0 milestone Jun 15, 2016
@axyr
Copy link
Author

axyr commented Jun 15, 2016

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

@tabacitu
Copy link
Member

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?

@axyr
Copy link
Author

axyr commented Jun 15, 2016

That you should watch soccer tight now ;)

@tabacitu
Copy link
Member

:-)) I am. Multitasking :-)

@vishalb812
Copy link

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.

@rzaglinskij
Copy link

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.

@tabacitu
Copy link
Member

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!

@rzaglinskij
Copy link

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
#36 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAn0ld9hMOaee3MhUl8utymN4Bnc6oFTks5qZyZtgaJpZM4I2KNu
.


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

@tabacitu
Copy link
Member

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!

@vishalb812
Copy link

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

@rzaglinskij
Copy link

good work. thanks.

@BinaryBlock
Copy link

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.

@vishalb812
Copy link

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!

@tabacitu
Copy link
Member

tabacitu commented Aug 6, 2016

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

@stygiansabyss
Copy link
Contributor

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?

@krtrth
Copy link

krtrth commented Jun 25, 2018

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

@tabacitu
Copy link
Member

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

8 participants