This is my problem:
Return right rows→
table.column( 2 ).search('aaa').draw();
Don't return anything→
table.column( 2 ).search('aaa|bbb', true, false ).draw();
I'm using these settings of datatable↓
scrollY: "350px",
scrollX: true,
scrollCollapse: true,
processing: true,
serverSide: true,
"ajax": {
"url": "djangoviews",
"type": "GET",
//"success" : back
},
searching: true,
//fixedHeader: true,
responsive: false,
fixedColumns: true,
"search": {
"regex": true
},
I'm using severprocessing.
finally I find the reasen.
when I use serverSide option on datatable settings.
column regex search goes don't work.
But why... I really don't know about it.
and other people may be same situation.
I want to discus about it...
Related
I'm using DataTables 1.11.3 and load data by ajax like this, and all events catchers work ok. But if I remove ajax option and put "data": ta_data, events don't work at all, no one. Then if I put by button 'cklick' ajax source and redraw events work again Events don't work with static load data from local variable data ?
$(document).ready(function(){
"use strict";
const ta_data = JSON.parse(ta).data;
let table_arch = $("#datatable-archive").DataTable({
"scrollY": '60vh',
"scrollX": false,
"paging": false,
"searching": false,
"info": false,
"order": [[ 10, "desc" ]],
"ajax": {
"url": 'rest/data/history/' + last_date,
"error": function(a,b,c){showErrorModal(a,b,c); offSpinner();}
},
})
.on( 'preDraw', function() {sp = {buy:0, sell:0, buyErr:0, sellErr:0};})
.on( 'draw.dt', function() {
$.when(offSpinner()).then(
function(){
gageMaker(sp, "Accuracy");
commonDonut();
}
)
});
});
It's necessary to change order. First set event catchers then initialize the table
const ta_data = JSON.parse(ta).data;
let table_arch = $("#datatable-archive"))
.on( 'draw.dt', function() {
$.when(offSpinner()).then(
function(){
gageMaker(sp, "Accuracy");
commonDonut();
}
)
}).DataTable({
"scrollY": '60vh',
"scrollX": false,
"paging": false,
"searching": false,
"info": false,
"order": [[ 10, "desc" ]],
"data" : ta_data
},
})
I have configured lengthChange to true still the length change is not showing in the table. I tried all the ways still not able to succeed in showing the length change .I need help to resolve this issue to display `length change'
$('#data-table-new').dataTable({"order": [[ 0, "asc" ]],
sDom: '<lf<t>ip>',
"lengthChange": true,
"aoColumns": [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": false }
]} );
The Datatables feature to hide columns using visible: false is ignored when stateSave is true. Does anyone have a fix or workaround for this?
Columns 1 and 2 should be hidden but are not. If you set stateSave to false, then they correctly get hidden. I have a JSfiddle test case here.
$(document).ready(function (){
var table = $('#example').DataTable({
stateSave: true,
"columnDefs": [
{ "visible": false, "targets": [1, 2] }
]
});
});
Is there a way to thoroughly mangle vue components that have been bundled with webpack?
When applying mangling via terser-webpack-plugin with mangle.properties set to true, then not all of the property names are mangled, for example:
location: {
lng: -.134281,
lat:51.513508,
zoom:13,
pitch:1,
bearing:60
}
becomes
location:{
k:-.134281,
M:51.513508,
zoom:13,
pitch:1,
V:60
}
Edit
As requested: the relevant portion of the Webpack configuration file, in this case the default vie-cli config with the mangle.properties item manually added:
minimizer: [
{
options: {
test: /\.m?js(\?.*)?$/i,
chunkFilter: () => true,
warningsFilter: () => true,
extractComments: false,
sourceMap: false,
cache: true,
cacheKeys: defaultCacheKeys => defaultCacheKeys,
parallel: true,
include: undefined,
exclude: undefined,
minify: undefined,
terserOptions: {
output: {
comments: /^\**!|#preserve|#license|#cc_on/i
},
compress: {
arrows: false,
collapse_vars: false,
comparisons: false,
computed_props: false,
hoist_funs: false,
hoist_props: false,
hoist_vars: false,
inline: false,
loops: false,
negate_iife: false,
properties: false,
reduce_funcs: false,
reduce_vars: false,
switches: false,
toplevel: false,
typeofs: false,
booleans: true,
if_return: true,
sequences: true,
unused: true,
conditionals: true,
dead_code: true,
evaluate: true
},
mangle: {
safari10: true,
properties: true
}
}
}
}
],
These two properties (zoom, pitch) so happened to be included in the reserved name list, have a look at this default domprops.json file which UglifyJS uses internally during mangling.
A default exclusion file is provided in tools/domprops.json which should cover most standard JS and DOM properties defined in various browsers. Pass --mangle-props domprops to disable this feature
If you like to keep this default list, you could do any of the following in the custom minify option of the plugin:
Create your custom reserved name list,
Load up the default list (domprops.json) and pass in a function/filter for removing those unwanted names,
Simply merge these two files if you are sure there is no name conflict.
webpack.config.js
{
optimization: {
minimizer: [
new TerserPlugin({
minify(file, sourceMap) {
const uglifyJsOptions = {
mangle: {
properties: {
reserved: require('your_custom_list')
}
// Or filter them
properties: {
reserved: require('uglify-js/tools/domprops.json')
.filter(name => ![
'zoom',
'pitch'
]
.includes(name))
}
}
};
return require('uglify-js').minify(file, uglifyJsOptions);
},
}),
],
},
}
Also, please mind the similarities between mangle.reserved and mangle.properties.reserved while doing this, as the latter one might be what you need here. Check out the minify option structure.
i am searching some data in the rows dynamically....so for this i hav used "dojox/grid/enhanced/plugins/Search .... but i am not getting any icon of search and i don't know how to use this plz suggest here is my code
grid = new EnhancedGrid({
id:'grid',
store : yourStore,
structure : layout,
rowSelector: '20px',
plugins: {
search:true,
pagination: {
pageSizes: ["50","100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 2,
position: "bottom"
},
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "rows"
}
}
});
grid.placeAt("myGrid");
grid.startup();
It's shown here. Just look at the source.