I'm trying to have dataTables remember the users last selection from pagination
with bStateSave: true, as well as showing the user a default display length of 50 results usingiDisplayLength
This is not working. Any ideas?
Delete all cookies beginning with SpryMedia on the relevant host, then try again.
Related
I am using ionic 4. I want to do search function in my apps. I am using search bar and get the result from API.
My problem is it always output duplicate result.
One problem is I haven't typing the word finish it already match the result that I want to search, then it will output the result.
Another problem is when I finish typing it output again the result.
How can I solved or avoid this problem?
Here is my html code:
<ion-searchbar [(ngModel)]="name" (ionCancel)="onCancel($event)" (ionChange)="Search($event)"></ion-searchbar>
Here is my home.page.ts
Search() {
this.myService.getSearch(this.name);
}
The second one sounds like you are not wiping the data in your this.myService.getSearch call - check what it does in there, is it starting from a new list or just returning more results? If that doesn't solve that issue then post the code for that section.
The first issue is by design.
You can slow this down with the debounce option:
<ion-searchbar debounce="1500"></ion-searchbar>
There are two input events you can experiment with ionChange and ionInput - they act differently but I cannot remember exactly which does which, you will have to try them both. A third option would be to handle neither of them and just use a submit button.
I want to put YADCF filters as the first row in the table. Is there a config option for that? Currently, I have it as a part of header row.
I am able to put the filter in footer and use display:table-header-group to put it in the first row. However, this feature stops working when I use "scrollX": true to allow horizontal scrolling.
You can try the filters_tr_index
As to integration with vertical scrolling, I'm not sure if it works properly (in the past there was no option to integrate with that feature)
filters_tr_index -
Required: false
Type: integer
Default value: undefined
Description: Allow to control the index of the inside the thead of the table, e.g when one is used for headers/sort and
another is used for filters
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.
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
Take a look at this example. Here you can see multiselect field that allows user to select multiple rows by pressing CTRL key down.
I have tried to use the keyUp function to capture the CTRL key, in order to somehow prevent user from selecting more than 1 row. But I am not sure hot to do this with mulitiselect xtype.
You might think way would I want a single select instead of multiselect, it is just something I need for my app I am working on. I like the layout of the example and want to keep the structure the same. The only thing I want to change is from multi -> single.
Thanks for any help.
The following config needs to go in your multiselect config. This will set the config for the boundList which is where the multiselect is.
listConfig: {
multiSelect: false
}