How to apply sorting when adding a row as a DOM node - datatables

I have a use case where I need to add rows dynamically via javascript. I want to add the row as a DOM node inline as it is what best suits my circumstances. So I am doing something like the following:
var name // String
var dob // Date
table.row.add($('<tr><td>' + name + '</td><td>' + dob.format('dd-mm-yy') + '</td></tr>'));
However with this approach the sorting will not be correct on the DOB field. I would need a way to tell it to sort by dob.getTime().
Is there a way I could do this?

Solution is to use the html5 data-* attributes. So sorting could be rectified thus:
table.row.add($('<tr><td data-sort=dob.getTime().toString()>' + name + '</td><td>' + dob.format('dd-mm-yy') + '</td></tr>'));
Note however there is an issue with using the data-* attributes on an uninitialised table. A solution to that issue can be found here

Related

How to format Date received from Element-UI

I'm making use of the datepicker from Element Ui where the user can select a range in dates. When the user fills in the datepicker, this is what I get back: ['2018-01', '2019-02'] . So just an array with two String elements. NOT a Date() object.
When dynamically outputting this to the user, I would like to show it as: January 2018 - February 2019
I got it somewhat working in my project but the code just really sucks and also doesn't work properly either. Checkout this gif of my current project and somewhat desired result. I was wondering if someone knows a good and easy way of achieving my desired result without too much hassle. I cannot use methods like toLocaleDateString() because it isn't a Date() object. I've got my code working in a Codesandbox. If any if you guys knows a solution feel free to edit the listed Codesandbox, I would highly highly appreciate it!
In the Codesandbox I got a computed property formateDate. The basic idea of the computed property is to cut the elements of the array I get back from the datepicker before and after the - effectively giving me the first & second month and first & second year. That data I store in these variables:
let monthOne;
let monthTwo;
let yearOne;
let yearTwo;
Since I get the months back as '01' and '02' for example, I created an array of objects to transform the '01' and '02' to January and February with a for loop. I then store the result in a new variable with:
displayDate = monthOne + ' ' + yearOne + ' - ' + monthTwo + ' ' + yearTwo;
Lastly, I tried to store that result into the timeperiodDisplayString at the correct index in the experience array of objects. Anyway, I'm probably overcomplicating this way to hard so I would REALLY appreciate any help with this.
Maybe you could map over the result from the datepicker component to create an array of Date objects. So you can use toLocaleDateString()
Something like this should work:
['2018-01', '2019-02'].map((date) => {
const split = date.split('-');
return new Date(split[0], +split[1] - 1);
});
You can use parse() function from javascript.
var d = Date.parse("2019-01");
console.log(new Date(d));

Django Concat columns with integers and strings

I have run into an issue using attempting to add values from two different columns together in a query, namely that some of them contain numbers. This means that the built in Concat does not work as it requires strings or chars.
Considering how one can cast variables as other datatypes in SQL I don't see why I wouldn't be able to do that in Django.
cast(name as varchar(100))
I would assume that one would do it as follows in Django using the Concat function in combination with Cast.
queryset.annotate(new_col=Concat('existing_text_col', Cast('existing_integer_col', TextField())).get())
The above obviously does not work, so does anyone know how to actually do this?
The use case if anyone wonders are sending jenkins urls saved as fragments as a whole. So one url would be:
base_url: www.something.com/
url_fragment: name/
url_number: 123456
I ended up writing a serializer that inherits from the base serializer that contains the urls fragments and a lot of other things. In it I made a MethodField for my complete url and defined a getter function that loaded in the different fragments and added them together. I also redeclared the fragmented fields to None.
The code inside the new serializer is:
complete = serpy.MethodField("get_copmlete")
serverUrl = serpy.Field(attr=None, call=False, required=False)
jobName = serpy.Field(attr=None, call=False, required=False)
buildNumber = serpy.Field(attr=None, call=False, required=False)
def get_complete(self, obj):
return obj.server_url + obj.job_name + '/' + str(obj.build_number)

Error when using fnAddData with data-order

I have a datatable which is originally populated server-side. Users may interact with the datatable by adding row data in a modal-popup. I recently added the data attribute data-order='' so that we can better handle date sorting. Now, our call to fnAddData dies with either of the following errors:
DataTables warning: table id=dtTable - Requested unknown parameter
'[object Object]' for row 3, column 0. For more information about this
error, please see http://datatables.net/tn/4
OR
DataTables warning: table id=dtTable - Requested unknown parameter '1'
for row 6, column 1. For more information about this error, please see
http://datatables.net/tn/4
Simple example: https://jsfiddle.net/shanabus/2yu7mLL3/
I checked out the support documentation on datatables.net but they don't address this specific issue. How do you use fnAddData if you are also using data-order?
You can try constructing tr node and use newer row.add() API method that accepts node as an argument.
For example:
$("#btnAddRow").on("click", function() {
var newRow = ['4/4/2014', '<test> Name'];
var newRowOrder = 999;
var $row =
$('<tr><td data-name="ReadingDate" data-order="' + newRowOrder + '">'
+ $('<div>').text(newRow[0]).html()
+ '</td><td data-name="Name">'
+ $('<div>').text(newRow[1]).html()
+ '</td></tr>');
$("#dtTable").DataTable().row.add($row).draw();
});
See updated example for code and demonstration.
I have created an issue #987 proposing to improve documentation regarding this use case.

Modify a column, to get rid of html surrounding an ID

I have a table and one of the columns contains html for an iFrame & within it an external video, specifically it's like
<iframe src="http://host.com/videos/ID" otherattributes...></iframe>.
I need to update the current column or create a new one (doesn't matter) so what I have is just the ID of that video, I know I could use a regex for it but I'm really weak with it.
perhaps so it find the content that is within literal characters: [videos/] and the upcoming ["] which comes right after the ID but I'm unsure how.
You can use CHARINDEX() function:
update T SET
VideoID=SUBSTRING(descr,
charindex('/videos/',descr)+LEN('/videos/'),
charindex('"',descr,charindex('/videos/',descr)+LEN('/videos/'))
-(charindex('/videos/',descr)+LEN('/videos/')))
SQLFiddle demo
This should work, assuming the text videos/ doesn't appear anywhere else in the html.
update htmltable
set id = SUBSTRING(SUBSTRING(html,
CHARINDEX('videos/', html) + 7,
LEN(html)
),
0,
CHARINDEX('"', SUBSTRING(html,
CHARINDEX('videos/', html) + 7,
LEN(html)
)
)
)
This updates a field named otherfield in table htmltable where the id in the url is '123'. It's pretty ugly code, but SQL Server has limited string functions.
If you have any control over the table structure, I would suggest you make some changes. The video ID should be stored in its own column, separate from the rest of the url. Then when you need to retrieve the url, you would concatenate the two parts to get the whole url. That would be much more maintainable.

jqGrid/NHibernate/SQL: navigate to selected record

I use jqGrid to display data which is retrieved using NHibernate. jqGrid does paging for me, I just tell NHibernate to get "count" rows starting from "n".
Also, I would like to highlight specific record. For example, in list of employees I'd like a specific employee (id) to be shown and pre-selected in table.
The problem is that this employee may be on non-current page. E.g. I display 20 rows from 0, but "highlighted" employee is #25 and is on second page.
It is possible to pass initial page to jqGrid, so, if I somehow use NHibernate to find what page the "highlighted" employee is on, it will just navigate to that page and then I'll use .setSelection(id) method of jqGrid.
So, the problem is narrowed down to this one: given specific search query like the one below, how do I tell NHibernate to calculate the page where the "highlighted" employee is?
A sample query (simplified):
var query = Session.CreateCriteria<T>();
foreach (var sr in request.SearchFields)
query = query.Add(Expression.Like(sr.Key, "%" + sr.Value + "%"));
query.SetFirstResult((request.Page - 1) * request.Rows)
query.SetMaxResults(request.Rows)
Here, I need to alter (calculate) request.Page so that it points to the page where request.SelectedId is.
Also, one interesting thing is, if sort order is not defined, will I get the same results when I run the search query twice? I'd say that SQL Server may optimize query because order is not defined... in which case I'll only get predictable result if I pull ALL query data once, and then will programmatically in C# slice the specified portion of query results - so that no second query occur. But it will be much slower, of course.
Or, is there another way?
Pretty sure you'd have to figure out the page with another query. This would surely require you to define the column to order by. You'll need to get the order by and restriction working together to count the rows before that particular id. Once you have the number of rows before your id, you can figure what page you need to select and perform the usual paging query.
OK, so currently I do this:
var iquery = GetPagedCriteria<T>(request, true)
.SetProjection(Projections.Property("Id"));
var ids = iquery.List<Guid>();
var index = ids.IndexOf(new Guid(request.SelectedId));
if (index >= 0)
request.Page = index / request.Rows + 1;
and in jqGrid setup options
url: "${Url.Href<MyController>(c => c.JsonIndex(null))}?_SelectedId=${Id}",
// remove _SelectedId from url once loaded because we only need to find its page once
gridComplete: function() {
$("#grid").setGridParam({url: "${Url.Href<MyController>(c => c.JsonIndex(null))}"});
},
loadComplete: function() {
$("#grid").setSelection("${Id}");
}
That is, in request I lookup for index of id and set page if found (jqGrid even understands to display the appropriate page number in the pager because I return the page number to in in json data). In grid setup, I setup url to include the lookup id first, but after grid is loaded I remove it from url so that prev/next buttons work. However I always try to highlight the selected id in the grid.
And of course I always use sorting or the method won't work.
One problem still exists is that I pull all ids from db which is a bit of performance hit. If someone can tell how to find index of the id in the filtered/sorted query I'd accept the answer (since that's the real problem); if no then I'll accept my own answer ;-)
UPDATE: hm, if I sort by id initially I'll be able to use the technique like "SELECT COUNT(*) ... WHERE id < selectedid". This will eliminate the "pull ids" problem... but I'd like to sort by name initially, anyway.
UPDATE: after implemented, I've found a neat side-effect of this technique... when sorting, the active/selected item is preserved ;-) This works if _SelectedId is reset only when page is changed, not when grid is loaded.
UPDATE: here's sources that include the above technique: http://sprokhorenko.blogspot.com/2010/01/jqgrid-mvc-new-version-sources.html