datatable pagination with ajax data source

[joch40]

Hi,

really good stuff, but with nearly no documentation (also in the api) it is very hard to adjust for own needs.

After some fight I got all the examples to work and to adjust to my data model.

It seems to me that the Ajax-Call Back only works if you use the Ajax-Data provider like in the InfiniteScrollDemoPage as only with this way you can set the DT_RowId and with out this value been set the call back is always empty. No problem with that in general, but the only way to feed the Data into the DataTable via the option.ajax way seems to be to create a subclass of an AbstractVirtualScrollResourceReference. That works also but with this I am loosing the pagination. So all works but whatever parameter I set I only get one endless page.

• Anybody any idea to get the pagination for the AbstractVirtualScrollResourceReference or
• another way to feed the data to option.ajax or
• to get the call-back working without using the option.ajax way?

Best

Janko

[martin-g]

Sorry for not being very helpful but I created the integration with DataTables.net because another user needed it. I haven't used it since then ... That's 5+ years.

AbstractVirtualScrollResourceReference provides virtual scrolling, i.e. the pagination is done automatically by DataTables while the user scrolls the table contents.

About the non-virtual scrolling - the best way to get help is to create a quickstart application that demonstrates the issue.

[joch40]

Dear Martin, thank you for your message and for providing support for some newbies like myself. I fully understand that you can not open up a 5 year old project. Maybe you get an idea for my problem. Certainly I can provide you with an project but I think first I describe again the problem that I was able to nail down a bit more. After some unsuccessful tries to get the feedback from the table from a simple dataprovider I switched to the VirtualScrollResourceReference. While this might be a hack I seems to me the only possibility to feed the DT_RowId Information to the TableEntrys and they seems to be essential for any workable feedback when I click on a row in the Table. So based on a VirtualScrollResourceReference a lot of things start to work well. However there seems to be some fighting in the Datatable about the Options I pass to it. My Options look like this: Options options = table.getOptions(); table.add(new BootstrapTheme(options)); options.columns(jsColumns) .select(selectOptions) .serverSide(true) .ordering(false) .searching(true) .paging(true) .pagingType(Options.PagingType.full) // .scrollY("450") // <-- If on click will be active but paging off // if off paging will be active but click will go unnoticed .deferRender(true) .scroller(scrollerOptions) .ajax(ajaxUrl) // <- this is the link to the data .stateSave(true) .info(true) .processing(true) .retrieve(true) ; As remarked in the comments. The .scrollY("450") parameter is the neuralgic point. If I commend this option out I first get a very long table but a field to determine how may rows I like Is active. Once I set this to 10 or 25 I get pagination all fine. But I can click where ever I want, I will not get any reaction. If I set the .scrollY("450") parameter active I get a DataTable of that size, no pagination what so ever but a click triggers the correct response and I can use the Feedback as planed…. Any idea? If you really want to look into the project it is an eclipse project of around 1 MB. Where would I upload it to? Naturally I can also provide you with a demo project that shows a classical dataprovider Inserted only via DataTables<Person, String> table = new DataTables<Person, String>("table", columns, dataProvider, 30) that reacts to clicking but without any usable information. Thank you again for your commitment to this good project. Best Janko Von: Martin Grigorov ***@***.***> Gesendet: Dienstag, 12. September 2023 09:24 An: wicketstuff/core ***@***.***> Cc: Dr. Janko Jochimsen ***@***.***>; Author ***@***.***> Betreff: Re: [wicketstuff/core] datatable pagination with ajax data source (Issue #754) Sorry for not being very helpful but I created the integration with DataTables.net because another user needed it. I haven't used it since then ... That's 5+ years. AbstractVirtualScrollResourceReference provides virtual scrolling, i.e. the pagination is done automatically by DataTables while the user scrolls the table contents. About the non-virtual scrolling - the best way to get help is to create a quickstart application that demonstrates the issue. — Reply to this email directly, view it on GitHub<#754 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKMVBLSCHIYV24OFRMQDRJLX2AEXZANCNFSM6AAAAAA4T4HWJY>. You are receiving this because you authored the thread.Message ID: ***@***.***>

…

________________________________ This email was scanned by Bitdefender

[martin-g]

Hi Janko!

Instead of sharing your project you could fork wicketstuff/core and modify the datatables-examples project to show the problem and then share with us a link to the the fork.

[joch40]

Hi Martin, sorry I didn’t manage to work on a fork of wicketstuff/core in eclipse. After an import I get 320+ Failed to execute mojo org.apache.maven.plugins:maven-toolchains-plugin:1.1:toolchain {execution: default} (org.apache.maven.plugins:maven-toolchains-plugin:1.1:toolchain:default:validate) messages. Probably I could solve this problem but the faster way was to create a very slim QuickStart project that shows the problem here: https://github.com/joch40/datatabledemo/tree/master (I don’t know way but it will not sync with main but only with master…) Description in the main App-Class: * There are 3 pages * * <br> * NewPage<br> * FilmPage<br> * FilmPageAlt<br> * * <br> * NewPage<br> * seems to be the natural way. Defining a PeopleDataProvider handing it // * to * the DataTable. All fine. But (there allway is a but): When the user clicks on * the table the AjaxEventBehavior gets activated (you see it in the console) * [see line 68ff where the output is defined. But there are no usefull * information in the parameters.... it is more less empty and so a little bit * useless. * * FilmPage <br> * That is the page that nearly works. But go get there I had to define a * FilmVirtualScrollResourceReference what (as the name implies is a * virtualscroller (something I am not really want) However, Click is shown * correctly etc. But this time no pages etc. * * FilmPageAlt <br> * That is a variation of FilmPage (the only difference is in line 187. With the * .scrollY("450") commented are the click doesn't work * * * Application object for your web application. If you want to run this * application without deploying, run the Start class. * Any ideas are welcome. Thanks Janko Von: Martin Grigorov ***@***.***> Gesendet: Mittwoch, 13. September 2023 12:25 An: wicketstuff/core ***@***.***> Cc: Dr. Janko Jochimsen ***@***.***>; Author ***@***.***> Betreff: Re: [wicketstuff/core] datatable pagination with ajax data source (Issue #754) Hi Janko! Instead of sharing your project you could fork wicketstuff/core and modify the datatables-examples<https://github.com/wicketstuff/core/tree/master/datatables-parent/datatables-examples> project to show the problem and then share with us a link to the the fork. — Reply to this email directly, view it on GitHub<#754 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKMVBLVGHT5HRTOCUJB3UM3X2GCZFANCNFSM6AAAAAA4T4HWJY>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>>

…

________________________________ This email was scanned by Bitdefender

[martin-g]

The problem in NewPage is that there is no id attribute on the <tr> elements. To add this attribute you could override org.apache.wicket.extensions.markup.html.repeater.data.table.DataTable#newDataGridView() and org.apache.wicket.extensions.markup.html.repeater.data.table.DataTable.DefaultDataGridView#newRowItem()
This is needed because you give an HTML <table> to DataTables and it enhances it. But if something is missing then DataTables cannot magically add it. You could use something like

options.rowId(new Json.RawValue("function(person) { console.log('person', person); return 'id_' + person.DT_RowId; }"))

but as will see in the browser console the person is the TR HTML element, so not really nice way to calculate it's id.

The FilmPage uses an impl of org.wicketstuff.datatables.virtualscroll.AbstractVirtualScrollResourceReference but this is not mandatory. You can use a custom ResourceReference that returns pages of JSON data but you will also need to remove .scroller(scrollerOptions) from the options. Please check https://datatables.net/manual/server-side for more details. DataTables JS widget will just make an Ajax call to the mounted Wicket ResRef to ask for the JSON array for specific page.

[joch40]

Dear Martin, first of all thank you for your patience with me. But I would really like to understand this. As the virtualscroll was never what I intended to do I tried your first hind. As I am a little bit old fashioned I sometimes get lost in several layers of anonymous classes. Therefore I spilt the DataTables and the DataGridView into proper classes and committed the changes. I manage to overwrite the newRowItem ok, but what exactly should I do there? You write that “there is no id attribute on the <tr> elements. To add this attribute you could override” so assume somewhere in @OverRide protected Item<T> newRowItem(String id, int index, IModel<T> model) { System.out.println("at newRowItem index:"+index+ " id "+ id+ " model "+ model); return new Item<>(id, index, model); } I have to insert the <tr> information but where and how? Best Janko Von: Martin Grigorov ***@***.***> Gesendet: Freitag, 15. September 2023 14:26 An: wicketstuff/core ***@***.***> Cc: Dr. Janko Jochimsen ***@***.***>; Author ***@***.***> Betreff: Re: [wicketstuff/core] datatable pagination with ajax data source (Issue #754) The problem in NewPage is that there is no id attribute on the <tr> elements. To add this attribute you could override org.apache.wicket.extensions.markup.html.repeater.data.table.DataTable#newDataGridView() and org.apache.wicket.extensions.markup.html.repeater.data.table.DataTable.DefaultDataGridView#newRowItem() The FilmPage uses an impl of org.wicketstuff.datatables.virtualscroll.AbstractVirtualScrollResourceReference but this is not mandatory. You can use a custom ResourceReference that returns pages of JSON data but you will also need to remove .scroller(scrollerOptions) from the options. Please check https://datatables.net/manual/server-side for more details. DataTables JS widget will just make an Ajax call to the mounted Wicket ResRef to ask for the JSON array for specific page. — Reply to this email directly, view it on GitHub<#754 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKMVBLX3K4XZZK72NYTGIY3X2RCL7ANCNFSM6AAAAAA4T4HWJY>. You are receiving this because you authored the thread.Message ID: ***@***.***>

…

________________________________ This email was scanned by Bitdefender

[martin-g]

The row item is used to populate the ` element - https://github.com/apache/wicket/blob/de89eb6a2db7fd25ca164e383daee38fa1053448/wicket-extensions/src/main/java/org/apache/wicket/extensions/markup/html/repeater/data/table/DataTable.html#L25

So, you need something like:

 protected Item<Person> newRowItem(String id, int index, IModel<Person> model)  {
     Item<Person> row = new Item<>(id, index, model);
     row.add(AttributeModifier.replace("id", model.getObject().getRow_Id()));
     return row;
}

I didn't use an IDE so the code might have errors, but this is the idea.

[joch40]

Dear Martin, thank you again to stay with me in this. This is really very much appreciated. I tried your approach but actually I seem not to be able to get this together. First version is to try to use the "DT_RowId" (see https://datatables.net/reference/option/rowId) Keyword like in the Virtual Scroller version. The other is to simply put the long value as the id. Both give no feedback when I click on the table. The code looks like this: @OverRide protected Item<T> newRowItem(String id, int index, IModel<T> model) { // get the real Object Film f = (Film) model.getObject(); // get the id that should later show up long filmid = f.getId(); // create a new row Item<T> row = new Item<T>(id, index, model); // Var 1 put the key word DT_RowId together with the id in a String String idstring = "DT_RowId" + Long.toString(filmid); // add the idstring to a row modifier row.add(AttributeModifier.replace(id, Model.of(idstring ))); // Var 2 add just the id (as a long) to a row modifier // row.add(AttributeModifier.replace(id, Model.of(filmid))); return row; // Standard: // return new Item<T>(id, index, f); } However, all this made me read the DataTables documentation forward and backward and I discovered another solution that works for me quite well. In the first step I added the databaseid as the first column like this columns.add(new SpanPropertyColumn<Film, String>(Model.of("id"), "id", "id") In the Options section I added .rowId(new Json.RawValue("0")) as the columns are zero indices this has the result that the row value of the first column (eg. the id column) will be returned on a click (like <div>11</div>. This works very stable and will not be confused by sorting or filtering. For some users the negative side might be that the databaseid is transparent to the user and consumes screen real-estate. There seems to be no way to hide a such a column other than not adding it in the first place (what obviously would break the idea here). I committed the “project” to git and the relevant part is the FilmNewPage. If you or someone else is interested I could reduce the project to the minimum to show this as a way to use datatables (and maybe to include it in the demo project). Best Janko Von: Martin Grigorov ***@***.***> Gesendet: Mittwoch, 20. September 2023 13:34 An: wicketstuff/core ***@***.***> Cc: Dr. Janko Jochimsen ***@***.***>; Author ***@***.***> Betreff: Re: [wicketstuff/core] datatable pagination with ajax data source (Issue #754) The row item is used to populate the ` element - https://github.com/apache/wicket/blob/de89eb6a2db7fd25ca164e383daee38fa1053448/wicket-extensions/src/main/java/org/apache/wicket/extensions/markup/html/repeater/data/table/DataTable.html#L25 So, you need something like: protected Item<Person> newRowItem(String id, int index, IModel<Person> model) { Item<Person> row = new Item<>(id, index, model); row.add(AttributeModifier.replace("id", model.getObject().getRow_Id())); return row; } I didn't use an IDE so the code might have errors, but this is the idea. — Reply to this email directly, view it on GitHub<#754 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AKMVBLSXZT6MWXU2T3VPEXLX3LICXANCNFSM6AAAAAA4T4HWJY>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>>

…

________________________________ This email was scanned by Bitdefender