How to clear Jquery Datatable Local Storage programmatically?
localstorage.clear() clears all localstorage.
But I need to clear the datatable values specifically.
<i class="fas fa-sync-alt RefreshButtonDataTable" onclick="ClearDataTableStorageAndRefresh()"></i>
<script>
function ClearDataTableStorageAndRefresh() {
ClearLocalStorageDataTables_tbl();
$('#tbl_SearchTasks').DataTable().ajax.reload();
}
</script>
function ClearLocalStorageDataTables_tbl() {
debugger;
var arr = []; // Array to hold the keys
// Iterate over localStorage and insert the keys that meet the condition into arr
for (var i = 0; i < localStorage.length; i++) {
if (localStorage.key(i).substring(0, 14) == 'DataTables_tbl') {
arr.push(localStorage.key(i));
}
}
// Iterate over arr and remove the items by key
for (var i = 0; i < arr.length; i++) {
localStorage.removeItem(arr[i]);
}
new Noty({
type: 'success',
theme: 'metroui',
layout: 'bottomRight',
text: 'Datatable Temporary Storage Cleared',
progressBar: true,
timeout: 5000
}).show();
}
Related
I have an array property:
arrayList: {
type: Array,
value:[
{id:"1",candy:"Reeces"},
{id:"1",candy:"M&M"},
{id:"1",candy:"KitKat"},
{id:"1",candy:"Twizzlers"}
]
}
and a boolean property
forceRerender: {
type: Boolean,
value: false
}
I call them in a Dom-Repeat to populate the HTML:
<template is="dom-repeat" as="candy" items="[[getCandyList(arrayList, forceRerender)]]">
<div id="[[candy.id]]" class="candy-row" data="[[candy]]" on-tap="selectCandy">
</template>
The selectCandy() function looks like this:
selectCandy(event) {
let arr = this.arrayList;
for(let j = 0, i = 0; j < arr.length; j++) {
if(arr[j].select) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
}
}
this.set('forceRerender', !this.forceRerender);
}
And my getter:
getCandyList(arr,forceRerender) {
return arr;
}
My selectCandy() effectively rearranges the arrayList, but does not visually update the HTML content to represent this. I can't seem to figure out why.
I've made a separate array and used that to change values. I've made a local array and pushed to that and returned it. I've rewritten the order in which things are done. Separated the sections up multiple times to review each portion individually.
I've been at this for at least 3 hours and I'm lost. Can't anyone explain to me here what I'm doing wrong?
This below example could give you some inspiration. As far as I understood, you want to move up (top) the selected item.
Demo
<template is="dom-repeat" items="[[getCandyList(arrayList, forceRerender)]]" as="candy">
<paper-item on-tap="selectCandy"> <div id="[[candy.id]]" class="candy-row" data="[[candy]]"> [[candy.id]] - [[candy.candy]]</div>
</paper-item>
</template>
And the Js may look like:
selectCandy(e) {
let temp = this.arrayList;
//In order to observable change in dom-repeat
this.set('arrayList', []);
temp.splice(e.model.index, 1);
temp.unshift(e.model.candy);
this.set("arrayList", temp);
this.set('forceRerender', !this.forceRerender);
}
You may re-organize the array with other types.
I have discovered the solution:
getCandyList(arr,forceRerender) {
let rowList = [];
for(let j = 0, i = 0; j < arr.length; j++) {
if(arr[j].select) {
let temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
i++;
}
}
arr.forEach(function(object) {
rowList.push(object);
}.bind(this));
return rowList;
}
and
selectCandy(event) {
this.set('forceRerender', !this.forceRerender);
}
moral of the story here is do all the stuff you wanna do to your objects and arrays in the get function.
i'm trying re-organised a list of data. I have given each li a unique key, but still, no luck!
I have had this working before exactly like below, think i'm cracking up!
let app = new Vue({
el: '#app',
data: {
list: [
{ value: 'item 1', id: '43234r' },
{ value: 'item 2', id: '32rsdf' },
{ value: 'item 3', id: 'fdsfsdf' },
{ value: 'item 4', id: 'sdfg543' }
]
},
methods: {
randomise: function() {
let input = this.list;
for (let i = input.length-1; i >=0; i--) {
let randomIndex = Math.floor(Math.random()*(i+1));
let itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
this.list = input;
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in list" :key="item.id">{{ item.value }}</li>
</ul>
Randomize
</div>
Edit:
Thanks for the answers, to be honest the example I provided may not have been the best for my actual issue I was trying to solve. I think I may have found the cause of my issue.
I'm basically using a similar logic as above, except i'm moving an array of objects around based on drag and drop, this works fine with normal HTML.
However, i'm using my drag and drop component somewhere else, which contains ANOTHER component and this is where things seem to fall apart...
Would having a component within another component stop Vue from re-rendering when an item is moved within it's data?
Below is my DraggableBase component, which I extend from:
<script>
export default {
data: function() {
return {
dragStartClass: 'drag-start',
dragEnterClass: 'drag-enter',
activeIndex: null
}
},
methods: {
setClass: function(dragStatus) {
switch (dragStatus) {
case 0:
return null;
case 1:
return this.dragStartClass;
case 2:
return this.dragEnterClass;
case 3:
return this.dragStartClass + ' ' + this.dragEnterClass;
}
},
onDragStart: function(event, index) {
event.stopPropagation();
this.activeIndex = index;
this.data.data[index].dragCurrent = true;
this.data.data[index].dragStatus = 3;
},
onDragLeave: function(event, index) {
this.data.data[index].counter--;
if (this.data.data[index].counter !== 0) return;
if (this.data.data[index].dragStatus === 3) {
this.data.data[index].dragStatus = 1;
return;
}
this.data.data[index].dragStatus = 0;
},
onDragEnter: function(event, index) {
this.data.data[index].counter++;
if (this.data.data[index].dragCurrent) {
this.data.data[index].dragStatus = 3;
return;
}
this.data.data[index].dragStatus = 2;
},
onDragOver: function(event, index) {
if (event.preventDefault) {
event.preventDefault();
}
event.dataTransfer.dropEffect = 'move';
return false;
},
onDragEnd: function(event, index) {
this.data.data[index].dragStatus = 0;
this.data.data[index].dragCurrent = false;
},
onDrop: function(event, index) {
if (event.stopPropagation) {
event.stopPropagation();
}
if (this.activeIndex !== index) {
this.data.data = this.array_move(this.data.data, this.activeIndex, index);
}
for (let index in this.data.data) {
if (!this.data.data.hasOwnProperty(index)) continue;
this.data.data[index].dragStatus = 0;
this.data.data[index].counter = 0;
this.data.data[index].dragCurrent = false;
}
return false;
},
array_move: function(arr, old_index, new_index) {
if (new_index >= arr.length) {
let k = new_index - arr.length + 1;
while (k--) {
arr.push(undefined);
}
}
arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
return arr; // for testing
}
}
}
</script>
Edit 2
Figured it out! Using the loop index worked fine before, however this doesn't appear to be the case this time!
I changed the v-bind:key to use the database ID and this solved the issue!
There are some Caveats with arrays
Due to limitations in JavaScript, Vue cannot detect the following changes to an array:
When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue
When you modify the length of the array, e.g. vm.items.length = newLength
To overcome caveat 1, both of the following will accomplish the same as vm.items[indexOfItem] = newValue, but will also trigger state updates in the reactivity system:
Vue.set(vm.items, indexOfItem, newValue)
Or in your case
randomise: function() {
let input = this.list;
for (let i = input.length-1; i >=0; i--) {
let randomIndex = Math.floor(Math.random()*(i+1));
let itemAtIndex = input[randomIndex];
Vue.set(input, randomIndex, input[i]);
Vue.set(input, i, itemAtIndex);
}
this.list = input;
}
Here is an working example: Randomize items fiddle
Basically I changed the logic of your randomize function to this:
randomize() {
let new_list = []
const old_list = [...this.list] //we don't need to copy, but just to be sure for any future update
while (new_list.length < 4) {
const new_item = old_list[this.get_random_number()]
const exists = new_list.findIndex(item => item.id === new_item.id)
if (!~exists) { //if the new item does not exists in the new randomize list add it
new_list.push(new_item)
}
}
this.list = new_list //update the old list with the new one
},
get_random_number() { //returns a random number from 0 to 3
return Math.floor(Math.random() * 4)
}
randomise: function() { let input = this.list;
for (let i = input.length-1; i >=0; i--) {
let randomIndex = Math.floor(Math.random()*(i+1));
let itemAtIndex = this.list[randomIndex];
Vue.set(this.list,randomIndex,this.list[i])
this.list[randomIndex] = this.list[i];
this.list[i] = itemAtIndex;
} this.list = input;
}
Array change detection is a bit tricky in Vue. Most of the in place
array methods are working as expected (i.e. doing a splice in your
$data.names array would work), but assigining values directly (i.e.
$data.names[0] = 'Joe') would not update the reactively rendered
components. Depending on how you process the server side results you
might need to think about these options described in the in vue
documentation: Array Change Detection.
Some ideas to explore:
using the v-bind:key="some_id" to have better using the push to add
new elements using Vue.set(example1.items, indexOfItem, newValue)
(also mentioned by Artokun)
Source
Note that it works but im busy so i cant optimize it, but its a little bit too complicted, i Edit it further tomorrow.
Since Vue.js has some caveats detecting array modification as other answers to this question highlight, you can just make a shallow copy of array before randomazing it:
randomise: function() {
// make shallow copy
let input = this.list.map(function(item) {
return item;
});
for (let i = input.length-1; i >=0; i--) {
let randomIndex = Math.floor(Math.random()*(i+1));
let itemAtIndex = input[randomIndex];
input[randomIndex] = input[i];
input[i] = itemAtIndex;
}
this.list = input;
}
I'm new to Vue and i would like to know how can i get data from multiple requests , store it in an object, and then preform some manipulations to the data...(format dates, add currency properties, etc..)
For example:
Suppose these are my requests:
'https://jsonplaceholder.typicode.com/posts/1'
'https://jsonplaceholder.typicode.com/posts/2'
'https://jsonplaceholder.typicode.com/posts/3'
So i want to do something like :
Set a state variable to store all the id's for looping it later on
state: {
ids:[1,2,3],
posts:[],
alteredPostsArr :[]
},
Loop the requests and store all the data
var dataStored = [];
var ids = this.state.ids
for(var i=0; i< ids.length; i++){
axios
.get('https://jsonplaceholder.typicode.com/posts/'+ids[i])
.then(function(response){
dataStored.push(response.data)
console.log(response.data);
})
}
this.state.posts = dataStored // store all results
Create a function that manipulates the data... something like
setDate :function(data){ // loop over this.state.posts
for(var i=0; i< data.length; i++){
var newDataObj = {
"userId": data[i].userId,
"id": data[i].id,
"title": data[i].title,
"body": data[i].body,
"date":new Date(),
}
this.state.alteredPostsArr.push(newDataObj )
}
}
I've look into vuex tutorials but i don't understand where should i put the axios requests loop... so i've tried to put it in the Actions, like here, but i get empty arrays.....
export default new Vuex.Store({
state: {
posts:[],
ids:[1,2,3],
alteredPostsArr:[],
},
methods:{
setDate:function(data){
// loop over this.state.posts
for(var i=0; i< data.length; i++){
var newDataObj = {
"userId": data[i].userId,
"id": data[i].id,
"title": data[i].title,
"body": data[i].body,
"date":new Date(),
}
this.state.alteredPostsArr.push(newDataObj )
}
}
},
actions: {
loadPosts ({ commit }) {
var dataStored = [];
var ids = this.state.ids
for(var i=0; i< ids.length; i++){
axios
.get('https://jsonplaceholder.typicode.com/posts/'+ids[i])
.then(function(response){
dataStored.push(response.data)
})
}
this.state.posts = dataStored // store all results
}
},
mutations: {
SET_POSTS (state, posts) {
state.posts = posts
}
}
every one!
I use tablpanel in extjs4,found the memory in IE8 didn't reduce when remove the panel in tabpanel,and also raised when add the panel again.so I write a test as below:
Ext.onReady(function() {
var currentItem;
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tabs',
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {
autoScroll:true,
bodyPadding: 10
}
});
var __my_task = '';
var i = 0;
try{
__my_task = {
run: function(){
if (i % 2 == 0){
for(var j = 0; j < 10; j++){
addTab(true);
}
}else{
var items = [];
tabs.items.each(function(item){
if(item.closable){
if(!false || item != this.item){
items.push(item);
}
}
}, this);
Ext.each(items, function(item){
tabs.remove(item);
item.destroy();
}, this);
} // else
i ++;
},
interval: 300
}
Ext.TaskManager.start(__my_task);
}catch(e){}
// tab generation code
var index = 0;
function addTab (closable) {
++index;
tabs.add(Ext.create('Ext.tree.Panel',{
title: 'New Tab ' + index,
iconCls: 'tabs',
closable: !!closable
}));
}
});
run it in IE8,the memory will raised so quickly,my code is wrong ? any question for me, thanks!
IMO it's hardly to evaluate if there is memory leak in Javascript (Extjs written in JS as you know). The object may be deleted with delete() (destroy() will use it) but cannot sure when the memory will be actually released.
You can find more about Javascript garbage collector in Deleting or setting to null and Javascript garbage collection
Using SlickGrid to display some pretty elaborate grids. The Example I am showing here isn't my code but basically an example given by the SlickGrid people duplicating my issue. My Grids need to have columns added dynamically with the column names being fed through an AJAX feed. Creating the column object in JS is not a problem and even adding them using the .push is seems to work fine as I can see them in the firebug console. The new columns never seem to rendner. I get a a bunch of tiny empty cells at the end of the grid but they never populate.
The script below can be replaced with the script in the "example1-simple.html" viewed here.
<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"},
{id:"%", name:"% Complete", field:"percentComplete"},
{id:"start", name:"Start", field:"start"},
{id:"finish", name:"Finish", field:"finish"},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];
var dynamicColumns = [];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function() {
data = [];
BuildExtraColumnsAJAX();
for (var i = 0; i < 2000; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
for (var x = 0; x < 20; x++) {
var columnName = "dynamicColumn" + x;
data[i][columnName] = x;
}
}
//alert("Go Pack Go");
grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
$("#myGrid").show();
})
function BuildExtraColumnsAJAX(){
//dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
var url = "http://services.digg.com/search/stories? query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript";
$.jsonp({
url: url,
callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
success: onSuccess,
error: function(){
alert("BOOM Goes my world");
}
});
}
function onSuccess(resp) {
for (var i = 0; i < resp.stories.length; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
function BuildExtraColumns(){
dynamicColumns = [];
for (var x = 0; x < columns.length; x++){
dynamicColumns.push(columns[x]);
}
for (var i = 0; i < 20; i++) {
dynamicColumns.push( {
id: "dynamicColumn" + i,
name: "Dynamic Column" + i,
field: "dynamicColumn" + i
});
}
}
If I put the line grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); in the firebug console and run it the grid than renders fine. It is almost like the script is still executing lines of code even though its not done creating the dynamicColumns.
The Digg AJAX call is just to similute an AJAX call, I of course would be using my own.
The grid is getting initialized before the AJAX call to get the additional columns completes.
Either wait until the columns have loaded to initialize the grid, or update the grid after the additional columns have loaded:
grid.setColumns(dynamicColumns);