Tables reset after each update
Tables reset after each update
nextdealbv
Posts: 15Questions: 3Answers: 0
Description of problem:
Hello,
Last week we did an upgrade of our Datatables 1.09 (and the old 1.x version of the editor) to the latest version but ever since we have done that we noticed that whenever we are updating some field/column the whole screen resets to the first page. Because of this its sometimes hard to know where that person was before editing the specific line.
For the update i just overwrote all the files from the editor and datatables itself.
I tried looking around but i cannot find a way to fix this. I found the stateSave (https://datatables.net/reference/option/stateSave) but i cannot get it to work.
How can i fix this problem without recreating all the pages in the hope that it solves the issue? Below is the current js that i am using.
(function($){
$(document).ready(function() {
$.fn.dataTable.render.ellipsis = function () {
return function ( data, type, row ) {
return type === 'display' && data.length > 10 ?
data.substr( 0, 10 ) +'…' :
data;
}
};
$('#tbl_smart_price').on( 'click', 'tbody td:not(:first-child)', function (e) {
editor.inline( this );
} );
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.tbl_smart_price.php',
table: '#tbl_smart_price',
fields: [
{
"label": "id",
"name": "id"
},
{
"label": "* sku:",
"name": "sku"
},
{
"label": "ean",
"name": "ean"
},
{
"label": "* bol_id",
"name": "bol_id"
},
{
"label": "url:",
"name": "url"
},
{
"label": "titel:",
"name": "titel"
},
{
"label": "koopblok_prijs:",
"name": "koopblok_prijs"
},
{
"label": "koopblok_verkoper:",
"name": "koopblok_verkoper"
},
{
"label": "historie_2h:",
"name": "historie_2h"
},
{
"label": "historie_4h:",
"name": "historie_4h"
},
{
"label": "stock:",
"name": "stock"
},
{
"label": "lvb_stock:",
"name": "lvb_stock"
},
{
"label": "xxl_prijs:",
"name": "xxl_prijs"
},
{
"label": "cost",
"name": "cost"
},
{
"label": "aanpassing:",
"name": "aanpassing",
"def": "5"
},
{
"label": "smart_price:",
"name": "smart_price"
},
{
"label": "aanpassing_tot_cost",
"name": "aanpassing_tot_cost"
},
{
"label": "updatebaar:",
"name": "updatebaar"
},
{
"label": "tijd:",
"name": "tijd"
},
{
"label": "smart_update_timestamp",
"name": "smart_update_timestamp"
},
{
"label": "smart_price_timestamp",
"name": "smart_price_timestamp"
},
{
"label": "ageing_dagen",
"name": "ageing_dagen"
},
{
"label": "min_aanpassing",
"name": "min_aanpassing",
"def": "0"
},
{
"label": "max_aanpassing",
"name": "max_aanpassing",
"def": "15"
}
]
} );
var table = $('#tbl_smart_price').DataTable( {
stateSave: true,
stateSaveCallback: function(settings,data) {
localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
},
stateLoadCallback: function(settings) {
return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
},
dom: 'QBfrtip',
ajax: 'php/table.tbl_smart_price.php',
columns: [
{
"data": "id"
},
{
"data": "sku"
},
{
"data": "ean"
},
{
"data": "url",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='"+oData.url+"'>"+oData.url+"</a>");
}
},
{
"data": "titel"
},
{
"data": "koopblok_prijs"
},
{
"data": "koopblok_verkoper"
},
{
"data": "stock"
},
{
"data": "lvb_stock"
},
{
"data": "xxl_prijs"
},
{
"data": "aanpassing"
},
{
"data": "smart_price"
},
{
"data": "aanpassing_tot_cost"
},
{
"data": "updatebaar"
},
{
"data": "ageing_dagen"
},
{
"data": "min_aanpassing"
},
{
"data": "max_aanpassing"
}
],
fixedHeader: true,
pagingType: "full_numbers",
select: true,
pageLength: 20,
lengthChange: true,
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
{
extend: 'collection',
text: 'Export',
buttons: [
'copy',
'excel',
'csv',
'pdf',
'print'
]
}
]
} );
} );
}(jQuery));
This question has accepted answers - jump to:
Answers
I'm not seeing that in this example, and there's nothing in your code to explain why that would be the case. Are you able to link your page so we can take a look,
Colin
I am afraid not. I can post all files here but would most likely not change a thing. What i could try is to remove all files and reupload them all from datatables but i am not sure if that would make a difference since i overwrote them all.
I finallyfigured it out.
I used the online editor to generate a new page which included most of the columns to see if the problem was also there. After some hassling (i forgot to add jquery and bulma) i got it to run properly and it worked just fine. It updated without returning to the first page.
Because of this i thought it was due too the differences in the css/js that got included so i changed the original html file to each seperate line to include all the code that was needed instead of a combined version but it still did not change.
So i went back to the JS file and checked the differences. At first i thought it was the ellipsis part so i removed that. No change.
So then i removed the inline editing and again no change. Then i changed the below to match that of the new file but again no change
Finally i removed the buttons but of course now i could not edit. So i changed the buttons to match the new style as it was in the newer JS file as you can see below:
And this actually did the trick. So the old style buttons seemed to have messed up the sticking to the page.
Now it seems i discovered another problem relating to this.
Because of the new style buttons i removed the dom: 'QBfrtip' part as i did not need this anymore but i forgot it also removes the Searchbuilder.
So i readded dom: 'Qfrtip' but now i am missing my edit buttons again. Adding a B again still does not give me the buttons because i did not add them of course.
At the moment i am a bit lost here to have this solved. I would love to use the new style buttons but also have the search builder active.
This above is my current working js file but without the search builder. I did see a page where i would be able to add it using the api but i could not get it to work (js novice here).
You say you reinstated the dom options, but they are not in your code. Then you say you did not add the buttons, but they are in your code.
Please make sure you are presenting your current code, and explain clearly what is not working for you.
If you are unable to link to your page, could you update this test case to demonstrate the problem, please. It would help for us all to be looking at the same thing,
Colin
Hello,
Sorry if the above JS is confusing. The contents of that JS file is the current running version that does have the edit buttons in the new style and does save the current page where we are editing on. This lacks the searchbuilder however. Below is a picture of this JS file in action.
Now i have the following JS file below which is the same but i added the dom: "Q" for the searchbuilder to it.
As you can see i am still using the new style buttons and everything. Only the dom line got added for the search builder.
This gets me the following screen:
As you can see the buttons and everything are gone but the search builder is there again. I tried different dom configs like dom: "QBfrtip" (the old style i used) but it lacks the buttons (most likely because that part got changed to the new style) and it will most likely also cause the jump back to the first page as it would be the same as i had before.
I hope this makes it easier to understand what the problem is. If there is something missing or not clear let me know and i will add that info.
looking at the screenshots I can see you have conflicting CSS files:
Note that you have two different sets of sorting icons. One is the standard Datatables styling and the other is Bootstrap styling. You probably have
jquery.dataTables.min.csswhich is conflicting with thehdataTables.bootstrap.min.cssand should not be used. The Styles docs discuss this in more detail. Open the appropriate style example and click the CSS tab to see what is needed. Use the Download Builder to get the appropriate files for the style framework you are using. This is not causing the problem you are asking about.The
domoption needs to be configured for the styling framework you are using. Usingdom: "QBfrtip"will style the elements with the default Datatables styling. The examples in thedomdocs show the default used for each style framework. Use the appropriate Bootstrap example as a base to start. You can add theQin the desired spot. Basicallydom: "QBfrtip"needs to be changed to use the Bootstrap grid classes to place the elements where you want.The alternative is to use the API method to insert the SearchBuilder. See this example.
Kevin
Here is an example using the
dom:http://live.datatables.net/guwafemu/209/edit
Here is an example using the API to insert both buttons and SearchBuilder. The
domoption is removed.http://live.datatables.net/yowemubo/1/edit
Kevin
Thank you Kevin,
you saved the day. I have been searching yesterday for most of the day and it seems it was as simple as adding the code below to make it work:
The full js file is now as follows:
Thanks again for the help in this.
I also double checked the CSS links and i indeed had the jquery one added for some reason. I cleaned up the code and am using the following css code now:
I first had all files combined to 1 files but i found it much easier to have them seperate so i could add/remove modules when needed. The only really annoying part is that sometimes i have to move a new module down or up so it gets loaded at the correct time. It took me quite a while to figure that part out because of constant jquery nagging.
The line with navbulma is a extra dropdown menu which is not standard included in bulma as it seems.
[EDIT]
I guess that was too soon. As soon as i added the searchbuilder the jumping back to the first page after editing kicked back in. Anyone else have an idea perhaps how to get this resolved?
The full js file is posted above.
I just been diving into the css/js code some more but i could not find a problem. I tried the example link code for the js/css parts but it did make no difference.
I have no idea where this problem could be. I am seriously thinking of recreating the full page to see if this still has the same problem but i am not sure if that would actually help.
Thats a good hint. I updated one of my examples to have multiple pages and the same thing happens with SearchBuilder enabled. Turn it off and, after editing, the table stays on the same page:
http://live.datatables.net/yowemubo/2/edit
@allna or @sandy or @colin hopefully can find the culprit in the SearchBuilder code.
Kevin
Ok, so i am glad that i am not the only one with the problem. Hopefully this can get fixed because making own conditions is awesome.
The only thing that would make it even cooler was if we could get multiple pre defined searches (like several favorites to choose from) wink wink
Try reading the documentation.
https://datatables.net/reference/option/searchBuilder.preDefined.criteria.value
Hi @nextdealbv @kthorngren ,
Something isn't right there, thanks for tagging us. I've raised an issue internally (DD-2043 for my reference) and will report back here when there is an update.
Thanks,
Sandy
Hi @nextdealbv @kthorngren ,
That should be the issue fixed now as you can see at this example. This will be available in the next SearchBuilder release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.
Thanks,
Sandy
@tangerine I know you can predefine a filter but its only 1 and not several presets for example, one that filters on stock alone and other on pricing above a particular point etc. If there where some presets like 5 buttons (maybe not the best example but you get my drift i hope) which are own there own predefined filter settings.
My boss has 5 different filter settings he wants to have so i made a copy of the js and html file changing the predefined one to each of his liking.
@sandy As long as we know there is a fix incoming in several weeks i can wait. I can mostly work around it by disabling paging and throwing everything in a single page. Not the prettiest but workable for now.
You can use
searchBuilder.getDetails()to get the current SearchBuilder filter. You can save that in a location of your choice. Then you can get that saved SearchBuilder filter and restore it usingsearchBuilder.rebuild().You could setup some buttons that your boss can create filters then save then to a DB or wherever then have a list he/she can choose from to load them.
Kevin
First of all i can confirm that the nightly seems to have fixed the issue. I will run some more tests to be sure but it is promising.
@kthorngren, i am afraid that this goes beyond my knowledge of js coding. I am more focused on linux scripting so running datatables is just a side project for me although i do manage quite a bit from there
Here is a simple example that saves the SearchBuilder filter to a variable with a button. Another button allows you to restore.
http://live.datatables.net/dozaluhe/2/edit
It also has a button to show applying a filter from a JS variable. You can save your boss's search filter as Javascript variables and use buttons to apply them. The
JSON.stringify(stored)outputs the saved filter in a format that you can copy and use for your variables, like thelondonvariable in the example. I used https://jsonlint.com/ to format the output for the test case.Kevin
@kthorngren Absolute awesome. It works quite nice. The website is a tiny bit slower but not that noticable. Looks great and works great also.