In Allan Jardine's DataTables plugin, what's the option by which no. of rows to display in table can be altered?
I know about iDisplayLength for server-side function. I am using it successfully.
When the database has sufficient rows, it shows those many rows.
But when, for example, if I set it to 10 (rows), it should display those many rows (even if there are only 3 rows in the database & the rest 7 blank rows should be displayed).
Basically I want to control the height of table, irrespective of how many records are there in the database.
I found out.
Just set this property in table initialisation
"sScrollY": "100px",
In place of 100px, put the size as required.
Wel one thing you could consider doing is controlling the minHeight of the class dataTables_wrapper wich is set at 302 px by default
.dataTables_wrapper {
clear: both;
min-height: 302px;
position: relative;
}
This usually is enough for everyone, but if you override the settings you could set it higher.
Related
In my project, the number of columns in main table depends on the user settings and I get it from AJAX to dataTable directly. Several of these columns show different amounts (eg pre-price, final-price, etc.). Now, I have a task to calculate these pices to total sums in the footer.
I already know in which columns what amounts and the ordinal number of these columns for a every user. The simplest thing left — to put these sums in the footer. To do this, I first need to create the required number of footer columns. Simple task, but!
I use a drawCallback method *:
drawCallback {
string = innerHTML(needNode).repeat(x_times)
...
}
...and my footer is works.
Then I calculated the page total and I did
window.setTimeout(function(){
$( api.column( columnNumber ).footer() ).html(pageTotal);
},3000);
...but I didn't see any result in empty footer...
What am I doing wrong?
*I cannot use the footerCallback method, because it contain no required object for counting columns.
**If I create a footer manually in HTML, then the right result will be displayed in the correct column. But the footer will be displayed twice: my "tfoot" and automatically created table "dataTables_scrollFoot".
I used the setTimeout() for enough time to create the footer. It works, but does no need effect :(
Help me please. Any help would be appreciated.
...........
I'd like to use the custom list app in Rally to display only those Portfolio Items that have an At Risk / Red status (see Rally documentation) so I can create a list of items needing attention/for discussion.
e.g. something like (PercentDoneByStoryPlanEstimate.Status = "At Risk")
Is this possible? Or would I need to recreate the colour logic in my query?
I like the concept. Unfortunately, the status color calculation is a bit involved and depends on a lot of different fields. It's not stored as an attribute on the artifact but rather calculated in real time as needed. It would probably be more feasible to load all of the portfolio items first, apply the health color calculations, and then filter by the color hex value before adding the data to a grid.
The status color would be retrieved like so:
var colorObject = Rally.util.HealthColorCalculator.calculateHealthColorForPortfolioItemData(recordData, 'PercentDoneByStoryCount') // Or 'PercentDoneByStoryPlanEstimate'
The hex value would then be accessed via colorObject.hex.
And the hex values used by Rally are:
Red: #F66349
Green: #8DC63F
Yellow: #FAD200
White: #E0E0E0
Grey: #D1D1D1
Situation:
I have a pandas dataframe which I convert into an html table via df.to_html(). I then add the DataTables class to the table. This DataTables-table has the following columns:
ID | X | Y | Val |...More columns...| Selection_Criteria |...More columns...
The values in Selection_Criteria can be either 1 or 0. I know that with:
$('#ProductList').DataTable( {
...
"fnInitComplete": function(oSettings, json) { $('#ProductList tbody tr:eq(0)').click(); }
});
(Source: http://code.datatables.net/forums/discussion/38171/automatic-select-of-the-first-row-on-reload)
..it is theoretically possible to select the first row. (In reality, I have not been able to simulate a click for the first row.)
But my question goes more towards: How do I automatically pre-select ALL rows where the value is 1 in Selection_Criteria? What is the best approach? Should this be done client/server side?
In pandas the term "select"(ing) means to screen out that which was not selected for. I know that in a table on a web page, selected can mean being highlighted to stand out from the others. There are a couple of ways you can do this on the server side. You could display two tables, one for each state of Selection_Criteria. This would save you the hassle of trying to select individual rows out of a table in the first place (which would be done with Javascript, not Pandas). While pandas has the ability to add a class to the resulting html, the class is applied to the element.
If you are using jquery you are going to use these pieces. as you haven't put example data I can't be exact.
replace x in the next line with the number of columns the Selection_Criteria=1 is across the table
$( "tr td:nth-child(x):contains('1')" ).addClass('selected');
There are solutions on the backend using beautifulsoup and css selectors, or lxml.etree with xpath selectors. But jquery is going to be the most concise with this problem.
#Aliester. Thank you for the pointer!
This helped me find the solution to my own question. What I did:
1.) Identify row index that I want to select when the table loads.
2.) Pass the index to js.
3.) Loop over the indices and apply the following command to each index entry:
table.row(':eq('+hit_index_row+')').select();
So I am using the API to select each individual row. This works for me and hopefully could be helpful to others as well. It may be a bit hacky, so more elegant suggestions are welcome!
You can do this by providing a function for the "rowCallback" option when initializing the DataTable. https://datatables.net/reference/option/rowCallback
Also it is generally better to use the API methods to select rows instead of just changing the class. I found that the DataTable + Select libraries keep an internal collection of selected row indexes (just current page if serverside processing is on) instead of using the class to resolve selected items.
So while the display will look right, if you just change the class, if you rely on any of the API methods to get selected items later on there will be issues. Additionally just changing the class on the row will not fire any of the "select" events on the table so you can't rely on those either.
How to hide kendo scheduler timeline rows if there are no events on the week. Did anyone face similar issue or have idea to solve this?
How to decrease height of k-slot?. I tried the following css but no luck
.k-scheduler-dayview .k-scheduler-table td,
.k-scheduler-weekview tr:nth-child(2) .k-scheduler-table td,
.k-scheduler-monthview .k-scheduler-table td {
height: 1em;
padding: .334em .5em;
font-size: 100%;
}
Can anyone resolve this?
The desired behavior (if I understand you correctly that you need to filter the groups when no events are available in given group) would require custom solution. For example you can use the dataBound event to check if given group have no events inside it. You can check how many events are rendered in each group by checking the groups property of the current view (which gen be get from view method). Finally you can hide the groups that you don't need by filtering the target resource dataSource (e.g.: scheduler.resources\[0\].dataSource.filter).
I have the following snippet of code for auto expanding the textarea in sencha touch. I need to cap it out at a set number of rows.
Any ideas?
http://www.senchafiddle.com/#Q9gjN
Wouldn't this be great if it were a nice, easy to use property.
At first I thought it would be the maxRows property but this is just the number of rows to display before the vertical scrollbar appears.
It may be that the only way would be a complicated solution such as this: http://www.codeproject.com/Articles/56392/How-to-Limit-the-Number-of-Lines-and-Characters-in
or
Limiting number of lines in textarea
EDIT: I needed to cap the number of rows in an address to 5 lines.
One approach could be to listen to the keyup event on the textareafield, check for the 'Enter' key and then revert back to previous input.
The approach I have taken is just to add validation to the model, which works great.
{ type: 'format', field: 'Address', message: 'Address cannot be more than 5 lines.', matcher: /^([^\r\n]{0,50}(\r?\n|$)){5}$/ }
The regex restricts saving a record to the store that has more than 5 lines, of more than 50 chars.