We have a table of data with columns like CaseId, name.. etc. Here Case Id is an hyper link. we are using the Jquery DataTables to display data. Here Issue is, If I am in page number 3 and clicking on any CaseId link here, It will redirect to cases page. Here if I click on back button it should display the page 3 data and it will select page number 3. But In my case it is going to page 1. I had handled the data level which is displaying page 3 data but here it's selecting the page number as 1. How to fix this... Can any one help me on this.
You can use the 'stateSave' option to save the state of your dataTable.
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
DataTables has the option of being able to save the state of a table
(its paging position, ordering state etc) so that is can be restored
when the user reloads a page, or comes back to the page after visiting
a sub-page. This state saving ability is enabled by the stateSave
option.
See https://datatables.net/examples/basic_init/state_save.html for more info.
Related
Using Vuetify Data Tables, I'm trying to figure out if there's a way to determine what page the current selected item is on, then jump to that page. My use case for this is, I'm pulling data out of the route to determine which item was selected in a Data Table so when a user follows that URL or refreshes the page that same item is automatically selected for them. This is working just fine, however, I can't figure out how to get the Data Table to display the correct page of the selection.
For example, user visits mysite.com/11
The Data Table shows 10 items per page.
When the user enters the site, item #11 is currently auto-selected, but it is on the 2nd page of items. How can I get this to show items 11-20 on page load?
I ended up using a solution similar to what #ExcessJudgement posted. Thank you for putting that code pen together, BTW! I created this function:
jumpToSelection: function(){
this.$nextTick(() => {
let selected = this.selected[0];
let page = Math.ceil((this.products.indexOf(selected) + 1) / this.pagination.rowsPerPage);
this.pagination.sortBy = "id";
this.$nextTick(() => {
this.pagination.page = page;
});
});
}
I'm not sure why I needed to put this into a $nextTick(), but it would not work otherwise. If anybody has any insight into this, it would be useful to know why this is the case.
The second $nextTick() was needed because updating the sortBy, then the page was causing the page to not update, and since I'm finding the page based on the ID, I need to make sure it's sorted properly before jumping pages. A bit convoluted, but it's working.
I have these five fields ID, Name, Address, Phone and Fax displaying on the datatable. I am using Column Visibility Feature and by default, I am displaying first four columns. Suppose, I make Fax column Visible and Phone Column Invisible. Now, if I refresh the page, I see the same four columns again. My question is, can we Retain this visibility / invisibility ?
Thanks.
Refresh the page? Do you mean redraw the datatables page? (e.g. by clicking a column header to sort or clicking 'next' in the datatable?)
If so, are you using javascript/jquery to modify the visibility of your elements?
Doing so will work initially - but because datatables doesn't 'know' that jquery has modified the element, when it redraws the table (in a new order, or on a new page or whatever) it will revert your changes to whatever state it understands the table to be in.
To make your changes persist over redraws, you need to use the datatables api - so that datatables knows what you're doing. like this:
var mytable= $('#mytable').DataTable();
mytable.column( 0 ).visible( false );
however IF you want these changes to persist between refreshes of the webpage in the browser, then you need to set up sessions, or store these configurations in a database.
Then every time the page in requested, you check that data, and you can decide dynamically onload how to initialise your datatable:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ userHiddenColumn ] }
] } );
} );
I have two buttons(Apply, Submit) on my website. I select a row(Page 1) and navigate to another page(Page 2) via grid pagination then select another row. I make few changes on the row and click 'Apply'. Changes get applied on the current page(page 2) but when I navigate to page 1 changes does not reflect. When I submit it sends both the affected row with changed values. Which means it changes the values on both rows but not reflecting it on UI. Is this the problem with cache or something else?
You can subscribe for complete event and refresh your datasource. I think it will work for you. Example :
create: {
url: "http://mycreate.json",
type: "POST",
complete: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
},
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H
I have a function which adds a button to a div "dettaglio_utenti". After calling the function with this instruction
tab+="<button data-dojo-type='dojox.mobile.Button' id='apri_mappa' onClick=\" location.href='tel:"+telefono+"'\">apri mappa</button>"
var vText = document.getElementById("dettaglio_utente");
vText.innerHTML = tab;
require(["dojo/parser"], function(parser){
parser.parse(vText);
});
It works only the first time that I display the page. The second time the button is not parsed and I see this error in the browser console: dojo/parser::parse() error Error: Tried to register widget with id==apri_mappa but that id is already registered
When you display the page for the second time, the first page must still be part of the dom. (Maybe this is a worklight feature, single page app?). So when dojo parses the second page it gives the error because the button with that id has already been created.
I don't believe preventing the parsing of the button a second time will accomplish what you need. I think your options are:
Destroy the widgets from the first page.
If you don't need an id on the button, you can omit it and Dojo will create an id that won't collide.
If you need the id, you can or use a counter when emitting the id of the button.
id='apri_mappa_' + i where i is the counter.
Only knowing what you wrote above, I think the order of preference is 2,1,3.
EDIT - How to destroy a widget
require(['dijit/registry'], function(registry) {
registry.byId('apri_mappa').destroy();
});