DataTables - File Location - datatables

http://legacy.datatables.net/ref
I am running an older version of DataTables, which so far has proven satisfactory for my needs. I have found the answer I am seeking, but just don't know WHERE?? the file is located within DataTables folder structure ???? - ( I want to make changes to the default # of records shown )
aLengthMenu
`[!$(document).ready( function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
// Setting the default display length as well as length menu
// This is likely to be wanted if you remove the '10' option which
// is the iDisplayLength default.
$(document).ready( function() {
$('#example').dataTable( {
"iDisplayLength": 25,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]]
} );
} );`
Any suggestions as to where this piece of code is located so I can change it?
Thank you in advance

Short answer: don't.
If you change the source code for a plugin, you lock yourself into either changing the source code every time the plugin gets updated or forcing yourself to use an outdated library/plugin.
Like most jquery plugins, you can change the defaults when the page loads before the pluging is used. I actually put all my defaults in a single file that I load after the other files load.
<script src='pathtojquery.js'></script>
<script src='pathtojqueryUI.js></script>
<script src='pathtoDatatables.js></script>
<script src='pathtoMyDefaults.js></script>
in pathtoMyDefaults.js, I have this line, among others:
$.fn.dataTable.defaults.aLengthMenu = [[5, 8, 10, 15, 20, 30, 50, 75, -1], [5, 8, 10, 15, 20, 30, 50, 75, "All"]];
You can examine $.fn.dataTable.defaults with a javascript debugger to see all of the defaults.
then in my code I just have to do this:
$(document).ready(function(){
$("#tblSelector").DataTable({stuff:"stuff",
// if page length is not included, or does not match what is in the array, it defaults to the last one in the array.
pageLength: 8,
moreStuff:"moreStuff"
} )
});

Related

jsPDF contents cut off issue with vue components and tailwind

I am using jsPDF to convert HTML components into a PDF.
Below is the code for that,
var doc = new jsPDF({orientation: 'l',unit: 'px',format: [1250,1100],compress : true});
let component=document.getElementById('document');
doc.html(component,{
margin: [10, 0, 50, 0],
callback: function (doc) {
doc.save("report.pdf");
},
x: 0,
y: 0,
});
The resulting PDF looks like.
PDF PROBLEM
I expect jsPDF to move the component to the next page whenever its find that the size of the component is bigger than the rest of the current page.

React Native - How to start another animation conditionally

I want to create my own loader using animation, my idea is using scale to handle it, so the step should be like:
show an image scale from (n) to 1 for the first time
check if conditional is accepted or not
if conditional accepted, show an image scale from 1 to (n)
I can achieve 1st condition, but when i try 2nd and 3rd condition, the animation start in a blink of eye,
anyone can help me how to fix this?
here's the code i've tried:
//animation function
playAnimation(){
this.setState({onLoad:true})
this._load.setValue(0)
this._scale.setValue(0)
Animated.timing(this._load, {
toValue: 100,
useNativeDriver: true,
duration:1000
}).start(()=>{
setTimeout(() => {
Animated.timing(this._scale, {
toValue: 100,
useNativeDriver: true,
duration:1000
}).start(()=>this.setState({onLoad:false}));
}, 2000);
});
onLoad = this._load.interpolate({
inputRange: [0, 50, 75, 100],
outputRange: [10, 1, 1.4, 1],
})
imageScale = this._scale.interpolate({
inputRange: [20, 35, 70],
outputRange: [1.2, 1, 20],
})
}
//on render
<Animated.Image
style={{
resizeMode:'contain',
position:'absolute',
zIndex:1,
width:width/2,
height:200,
transform:[{scale:this.state.onLoad?onLoad:imageScale}]
}}
source={{uri: "https://www.knittedhome.com/communities/5/004/012/872/235/images/4628207884.jpg"}}
/>
and the result:
How your code works right now is somewhere in your code, you're calling PlayAnimation().
PlayAnimation() will:
start and complete first animation
Wait 2 sec
start and complete second animation
What you're doing in your Animated.Image is setting the transforms to different values. This doesn't start or stop the animation, just tells Animated.Image what value to set transform to.
What you should do
Use one Animated.Value to keep track of the scale. Assign that value to the Animated.Image transform.
Write two Animation functions:
scaleDown, call this where you're currently calling PlayAnimation
scaleUp, use your onLoad conditional to execute this in render or somewhere appropriate.

jQuery DataTables Editor: avoid table reloading after an inline edit

I use the DataTables Editor plugin (https://editor.datatables.net/) for editing a table with remote data (https://datatables.net/examples/data_sources/server_side.html) in inline mode (https://editor.datatables.net/examples/inline-editing/simple.html)
After some field is edited, submitted and a response from the editor's server handler is returned, the table always completely reloads sending an extra AJAX request to the server even though there's no need to do that since only one field in only one row was changed and all the data required to redraw the table row have already been received in the previous inline edit response.
So the question is whether it's possible to get rid of the extra AJAX call and redraw the edited row only, rather than completely refreshing the whole table.
The piece of code responsible for the reloading is:
// dataTables.editor.js
Editor.prototype._submit = function ( successCallback, errorCallback, formatdata, hide )
{
...
// Submit to the server (or whatever method is defined in the settings)
this._ajax(
submitParams,
function (json) {
...
// the following line forces the table to completely reload
that._dataSource( 'commit', action, modifier, json.data, store );
...
}
)
...
}
Here is an answer from Datatables Forum:
Yes, you can set the drawType option to none in the form-options object (e.g. the second, optional, parameter passed into inline(). That will stop DataTables from doing a redraw (in the case of server-side processing that involves the Ajax request). It does mean that any sorting or filtering changes caused by the change in data won't be immediately shown though.
Allan
try with stateSave: true
https://datatables.net/reference/option/stateSave
$(document).ready(function() {
var table = $('#table_name').DataTable(
{
columnDefs: [{
orderable: false,
targets: [0, 1, 8, 9]
}],
,
stateSave: true,
"lengthMenu": [[10, 50, 100, 500, -1], [10, 50, 100, 500, "all"]]
}
)
});

Finding Animated Bar Chart Library Or Component

I am interested in making a bar chart that changes over time (ideally bars will move up and down smoothly to show data changes over time). I didn't expect it would be difficult but, maybe due to the way I am searching, I cannot find a pre-built component or library that does this. I have come across other animated graphs that show data changes over time (like https://developers.google.com/chart/interactive/docs/gallery/motionchart and http://www.highcharts.com/demo/dynamic-update) but nothing that does what I describe in a bar chart. It would also work if I could find a line chart or pie chart that smoothly changed over time but I would rather make a bar chart to do this if possible.
Does an application or component or library like this exist (and if so can you point me in the right direction)? If for some reason nothing like this is available, what is the closest thing to it available (what is the path that would require the least amount of effort to produce this chart)?
ZingChart should be able to do this for you, and it's super easy to use. The chart configuration is defined using a JSON object. Inside the plot object, the animation object can hold a number of different animation options, including effect, speed, delay, and sequence. More information on ZingChart's animation effects can be found here. The render method is called to tell ZingChart where to render the chart using a div's unique ID. For this example, I configured a function to be called every 3000 milliseconds, generating a random array of numbers between 0 and 100, using the setseriesvalues method to change the data at plotindex 0.
var oData = {
"type": "bar",
"scaleY": {
"values": "0:100:10"
},
"plot": {
"animation": {
"effect": "ANIMATION_SLIDE_BOTTOM"
}
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69]
}]
};
zingchart.render({
id: 'myChartDiv',
width: 600,
height: 400,
data: oData
});
setInterval(function() {
var aValues = [];
for (var n = 0; n < 12; n++) {
var num = Math.random() * (100 - 0) + 0;
aValues.push(num);
}
console.log(aValues);
zingchart.exec('myChartDiv', 'setseriesvalues', {
plotindex: 0,
values: aValues
});
}, 3000);
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChartDiv"></div>
Full disclaimer: I'm on the ZingChart team, but if there's anything else I can help you with, I'd be happy to help!

Using a texture atlas in Xcode WITHOUT cocos2d

Following on from this question:
How should I go about animating over 200 images in iOS?
i'd like to know how to use a texture atlas in Xcode, but not with cocos2d. Too much of the project is already completed for me to port it over to cocos2d now. This will also be the only animation with this number of images.
The only tutorials out there seem to involve cocos2d or corona. I've downloaded Zwoptex and have packed all my sprites but, even then, i'm not sure if i should be trimming them, allowing rotation, giving them padding or even how i handle my retina images.
I've been looking at this link: http://mysterycoconut.com/blog/2011/01/cag1/ as recommended to me from my last question but it seems to gloss over many parts that i'm struggling with.
I'd really appreciate any help with this.
The texture atlas is designed to run with Cocos2D, there is a lot of dependencies with the other components. So I don't think that's a good choice for you.
The tutorial you posted is good otherwise. It could be most easy to use, but it gives a very good entry point. The main parts of this code are the - display and the - (void)displayLayer: methods:
The display method is call when the layer needs to its content. The animation will call (indirectly) the display method and here we call the displayLayer which will change the image to display (I hope I've been clear :!).
Here how you can refactor the display method if you want use a zwooptex file (or other) with non fixed size:
// Implement displayLayer: on the delegate to override how sample rectangles are calculated; remember to use currentSampleIndex, ignore sampleIndex == 0, and set the layer's bounds
- (void)display;
{
static const CGRect sampleRects[11] = {
{ 0, 0, 38, 47 }, // run
{ 0, 47, 46, 47 },
{ 82, 0, 40, 47 },
{ 122, 0, 30, 47 },
{ 152, 0, 36, 47 },
{ 38, 0, 44, 47 },
{ 188, 0, 42, 47 },
{ 230, 0, 26, 47 },
{ 46, 47, 28, 47 },
{ 74, 47, 28, 47 },
{ 102, 47, 28, 47 },
};
unsigned int idx = [self currentSampleIndex];
if (idx == 0)
return;
self.bounds = CGRectMake(0, 0, sampleRects[idx-1].size.width, sampleRects[idx-1].size.height);
self.contentsRect = CGRectMake(sampleRects[idx-1].origin.x/256.0f, sampleRects[idx-1].origin.y/128.0f, sampleRects[idx-1].size.width/256.0f, sampleRects[idx-1].size.height/128.0f);
}
#end
If you have any question, don't hesitate. ;)