I need to add one extra column to the datatable. This column will have incrementing serial no like 1, 2, 3, 4 etc...
I found this example, but this is not working for server side processing and I want searching-sorting working(if possible) which is also not here.
https://datatables.net/examples/api/counter_columns.html
Notes:
1) Datatable uses server side processing.
2) Sorting and searching should work on that counter column. (if possible)
3) Would be good, if I can achieve it completely on the client side using js. I don't want to make any code at server side for this(if possible).
4) Pagination should update counter no serially means if the previous page has last counter no 15, then next page should start with counter 16.
By the way I also checked this:
"Column Index" on a server-side processed DataTable
But accepted answer of this question violates my 4th requirement.
Any help would be appreciated.
Thanks,
Parth Vora
If anyone still has this problem, I solved it with draw event listener and DataTable's page.info() method. My code:
table.on('draw.dt', function () {
var info = table.page.info();
table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1 + info.start;
});
});
table.on('draw.dt', function () {
var info = table.page.info();
table.column(0, { search: 'applied', order: 'applied', page: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1 + info.start;
});
});
IT WILL WORK FINE "Thank You Brother Your Code usefull..Mansur Anorboev "
Related
I am trying to add columnSummary to my table using Handsontable. But it seems that the function does not fire. The stretchH value gets set and is set properly. But it does not react to the columnSummary option:
this.$refs.hot.hotInstance.updateSettings({stretchH: 'all',columnSummary: [
{
destinationRow: 0,
destinationColumn: 2,
reversedRowCoords: true,
type: 'custom',
customFunction: function(endpoint) {
console.log("TEST");
}
}]
}, false);
I have also tried with type:'sum' without any luck.
Thanks for all help and guidance!
columnSummary cannot be changed with updateSettings: GH #3597
You can set columnSummary settings at the initialization of Handsontable.
One workaround would be to somehow manage your own column summary, since Handsontable one could give you some headeache. So you may try to add one additional row to put your arithmetic in, but it is messy (it needs fixed rows number and does not work with filtering and sorting operations. Still, it could work well under some circumstances.
In my humble opinion though, a summary column has to be fully functionnal. We then need to set our summary row out of the table data. What comes to mind is to take the above mentioned additional row and take it away from the table data "area" but it would force us to make that out of the table row always looks like it still was in the table.
So I thought that instead of having a new line we could just have to add our column summary within column header:
Here is a working JSFiddle example.
Once the Handsontable table is rendered, we need to iterate through the columns and set our column summary right in the table cell HTML content:
for(var i=0;i<tableConfig.columns.length;i++) {
var columnHeader = document.querySelectorAll('.ht_clone_top th')[i];
if(columnHeader) { // Just to be sure column header exists
var summaryColumnHeader = document.createElement('div');
summaryColumnHeader.className = 'custom-column-summary';
columnHeader.appendChild( summaryColumnHeader );
}
}
Now that our placeholders are set, we have to update them with some arithmetic results:
var printedData = hotInstance.getData();
for(var i=0;i<tableConfig.columns.length;i++) {
var summaryColumnHeader = document.querySelectorAll('.ht_clone_top th')[i].querySelector('.custom-column-summary'); // Get back our column summary for each column
if(summaryColumnHeader) {
var res = 0;
printedData.forEach(function(row) { res += row[i] }); // Count all data that are stored under that column
summaryColumnHeader.innerText = '= '+ res;
}
}
This piece of code function may be called anytime it should be:
var hotInstance = new Handsontable(/* ... */);
setMySummaryHeaderCalc(); // When Handsontable table is printed
Handsontable.hooks.add('afterFilter', function(conditionsStack) { // When Handsontable table is filtered
setMySummaryHeaderCalc();
}, hotInstance);
Feel free to comment, I could improve my answer.
in the following code (jsbin available here) I have two input elements, a range and a text, bound together via a computed property.
var vm = new Vue({
el: '#main-container',
data: {
sliderValue: 100,
},
computed: {
actualValue: {
get: function() {
if (this.sliderValue <= 100) {
return this.sliderValue;
} else {
return Math.round(this.sliderValue * 12.5 - 1150);
}
},
/* set won't work for val > 100*/
set: function(val) {
if (val <= 100) {
this.sliderValue = val;
} else {
this.sliderValue = Math.round((val + 1150)/12.5);
}
}
}
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="main-container">
<input type="range" v-model="sliderValue" min=1 max=132>
<input type="text" v-model="actualValue">
<p>Slider: {{sliderValue}}</p>
<p>Actual: {{actualValue}}</p>
</div>
The range goes from 1 to 132, and its range is mapped [1..500] in the text input, with a simple transformation (basically it's a linear mapping with two different slopes for [1..100] and [101..132]) using the actualValue computed property.
Getting actualValue works as expected: dragging the slider correctly updates the input text with appropriate values in the range [1..500].
I'm not able to find a way to set actualValue, though. I'd like to be able to type a value in the text input, and make the slider's thumb update accordingly to the inverse transformation (val + 1150)/12.5.
It works as long as the typed number is in the range [1..100], but it "explodes" for numbers >100, e.g. 101 makes the sliderValue jump at 80892 and actualValue is then re-calculated as 1010000. As far as I understand, it's a looping-feedback scenario.
I've tried also alternative approaches (watch; v-on:change in the text input; using a third variable) to no avail.
Thanks in advance for any suggestion!
It's an amazing puzzle, and challenged me for a long time!
Look at the screenshot below. Your sliderValue and actualValue are strings, not integers. When you set actualValue as 101, you are actually setting it as a string value of "101"
Now, your sliderValue = ((actualValue + 1150)/12.5)
"101" + 1150 = "1011150" (another string!, try it in the developer console)
That messes up your entire calculation. Now you know how to fix it :-)
And you need to get that Vue devtools from here: https://github.com/vuejs/vue-devtools
EDIT: Response to comment #3
Here is the modified jsBin: http://jsbin.com/mahejozeye/1/edit?html,js,output
The only difference is introduction of two console.log statements in your map2 function. This helps you identify if your non-linear mapping function is working correctly or not. If you keep your developer console open, you will see what is happening in this function.
Case 1: When you set the value radius = 25 using the text box, your sliderRadius gets set to 111.55518394648828 and your radius again gets re-calculated as 25. So it comes around in a full circle and everything is stable here.
Case 2: When you set the value radius = 55, your sliderRadius gets set to 173.03607214428857 through your non-linear map2() function, which resets radius to 51.29869180420927
Clearly there is a circular dependency issue. Your sliderRadius and radius are very much dependent on each other and therefore radius is unable to take the value between 51 and 58.
You need to evaluate why it happens, as it has a lot to do with the non-linear mapping function that you have defined. The moment radius can take stable values at 55 (through the map2 function), then your current problem will be resolved.
The simplest fix is to set your input type to number:
<input type="number" v-model="actualValue">
or you can convert your value to an integer with something like:
set: function(val) {
var intVal = parseInt(val, 10);
if (!isNaN(intVal)) {
if (intVal <= 100) {
this.sliderValue = Math.max(1, intVal);
} else {
this.sliderValue = Math.min(132, Math.round((intVal + 1150) / 12.5));
}
}
}
When searching through a table or navigating to the last page of the table there may be fewer results that the pageLength setting, so table shinks in height. I would like to prevent that by filling missing rows with empty rows. How can I do that?
You can use the bScrollCollapse property along with sScrollY.
As documentation say:
When vertical (y) scrolling is enabled, DataTables will force the
height of the table's viewport to the given height at all times
(useful for layout). However, this can look odd when filtering data
down to a small data set, and the footer is left "floating" further
down. This parameter (when enabled) will cause DataTables to collapse
the table's viewport down when the result set will fit within the
given Y height.
You can use it like this:
var table = $('#example').dataTable({
"sScrollY": "400",
"bScrollCollapse": false
});
An example of this is here http://live.datatables.net/ukiyek/115/edit#javascript,html
UPDATE:
You can also set the table height to 100% so that the whole area to be filled:
var table = $('#example').dataTable({
"sScrollY": "400",
"bScrollCollapse": false,
"fnDrawCallback": function() {
$(this).attr("height","100%");
}
});
Example here
UPDATE 2:
Found exactly what you are looking for in this thread http://www.datatables.net/forums/discussion/4112/possible-to-keep-datatable-height-static-even-when-filtering
Have a look at this example which adds empty rows at the end.
Adding rows seems like an easier and more generic solution than styling fixed scrolling area (as in MavRoSCy solution n.1).
So, here's what works for me.
$(document).ready(function () {
var table = $('#example').dataTable({});
table.api().on('draw', function () {
var info = table.api().page.info(),
rowsOnPage = info.end - info.start,
missingRowsOnPage = info.length - rowsOnPage;
if (missingRowsOnPage > 0) {
for (var i = 0; i < missingRowsOnPage; i++) {
table.find('tbody').append(buildEmptyRow(6));
}
}
});
});
function buildEmptyRow(columnsCount) {
return '<tr class="empty">' + Array(columnsCount + 1).join('<td><div> </div></td>') + '</tr>';
}
Fiddle: http://live.datatables.net/ruviwabu/1/edit
Here's a script that animates a bouncing square:
http://jsfiddle.net/YH9nM/18/
var count = 1,
tM = new TimelineLite(),
element = $('#boxy');
function log(){
console.log('just bounced');
element.html('I\'ve bounced: ' + count + ' times!');
count++;
}
tM.from( element, 2, { top:'-=60px', ease: Linear.easeNone, repeat: -1, onRepeat: log() }, 0 );
However, that onRepeat option is not behaving as I'd expect. Rather than triggering the log function every time the animation repeats, it runs it once when the animation starts the first time.
It's behaving exactly as the onStart option would. Why is this happening? How can I make the div count how many times it's bounced ad infinitum?
You're running the log function when you define your tween, by using log(), and are assigning the return value of log to onRepeat (which is undefined since you don't return anything). You want the onRepeat var to be assigned to the log function
change
onRepeat: log()
to
onRepeat: log
You can see this in action here.
Patrick did actually answer the question, but here's what you want to do if you wish to pass parameters to a function you wish to run onRepeat:
onRepeatParams: ['as','many','parameters','as',1,true,'ly','wants'];
I also believe the most efficient way to access the element the timeline is applied to is through using the self keyword like this:
onRepeatParams: ["{self}"];
and then in the function doing this:
$(element.target).html('I\'ve bounced: ' + count + ' times!');
Here's what I mean in context:
var count = 1,
tM = new TimelineLite(),
element = $('#boxy');
function log(element){
console.log('just bounced');
$(element.target).html('I\'ve bounced: ' + count + ' times!');
count++;
}
tM.from( element, 2, { top:'-=60px', ease: Linear.easeNone, repeat: -1, onRepeat: log, onRepeatParams: ["{self}"] }, 0 );
http://jsfiddle.net/YH9nM/23/
I have a query for the Rally Analytics which returns a data set larger than the pagesize. So I want to do another query to return the remainder data set. I tried setting a startindex value but that does not work, StartIndex stays at 0.
this.query = {
find:Ext.encode(requestedQuery.find),
StartIndex:20000,
pagesize:20000 //MAX_PAGESIZE
};
_queryAnalyticsApi:function () {
Ext.Ajax.request({
url:"https://rally1.rallydev.com/analytics/1.27/" + this.workspace + "/artifact/snapshot/query.js?" + Ext.Object.toQueryString(this.query) +
"&fields=" + JSON.stringify(this.requestedFields) + "&sort={_ValidFrom:1}",
method:"GET",
//need to change this to a POST
success:function (response) {
this._afterQueryReturned(JSON.parse(response.responseText));
},
scope:this
});
},
that works, it was confusing because the attribute of the result set is called StartIndex. It would be nice if the granularity (i.e. day, week) could be defined and handled on the server first, so it wouldn't have to return such a large dataset.
The parameter you'll want to use is called start. Also, on subsequent pages it is important to include a filter using the ETLDate returned from the first page of data so your results are consistent in time. We have created a SnapshotStore in the AppSDK 2.0 that handles all this complexity for you. Look for it soon!