I am trying to insert a href into one of my columns in DataTables but Im having some issues since I need the actual href to show my slug and then the full company name.
Example how it should be formatted: "company"
Real data: Toyota Cars.
I am using columns.render which seems to be the correct function but I can't wrap my head around how I can get 'company' between the a tags. The function does not even make use of the "data" specifier, instead it takes the data first in my ajax file which in this case is slug.
My DataTable.js file
ajax: '/api/datatable',
columns: [
{ data: 'slug' },
{ data: 'company' },
],
"columnDefs": [
{ targets: [0, 1], visible: true},
{ "targets": 0,
"data": "This doesnt even seem needed?",
"render": function ( data, type, row, meta ) {
return 'full company name';
}
}
],
I will go ahead and give an answer, based on the assumption that you are trying to merge values of 2 columns. If my assumption is not correct, please, update the question to clarify "expected vs actual" results.
You are using data parameter in render function. That parameter is based on the value you specified in columns.data. In your case (with target === 0), data will contain the value that DataTable got for { data: 'slug' } column.
If you want to merge values from different columns into one, then render function is the correct way to do it. However, instead of data, you should use row parameter, which contains all key-value fields for a row.
For example:
// ...
"targets": 0,
"data": null,
"render": function ( data, type, row, meta ) {
return ''+row.company+'';
// or whatever your row object key-value structure is
}
// ...
Related
Basically, I have a button in every row in the third column, and when the user clicks on the button, I would like to call a function with parameters (they are from the table row). I saw that someone use row.errorType (for example), but that's gave me 'undefined' value :( Any ideas?
columns: [
{
"data": "errorType",
"render": function (data) {
return data;
}
},
{
"data": "errorDescription",
"render": function (data) {
return data;
}
},
{
"data": "entityId",
"render": function (data, row) {
return `<button class="newError" onclick="openModal(${row.errorType}, ${row.errorDescription}, ${data})"><i class="icon ticket errorTableIcon"></i></button>`;
}
}
],
You are using the DataTables columns.render option, but you are not supplying the expected parameters.
You are using:
"render": function (data, row) { ... }
You should be using:
"render": function (data, type, row, meta) { ... }
So, what you are referring to as row is actually type. Change your parameters as shown above to pick up the row data object correctly - and then you should be able to use variables such as row.errorType in your string builder.
You still need to ensure that variables which resolve to strings are themselves enclosed in quotes, so your string template may need to be adjusted.
For example, you may need "${row.errorDescription}" instead of ${row.errorDescription}.
My product table is sorted with initialSort by the product release month ascending. I also grouped my products by a codename which is determinate by the ajax json response url and renamed them to readable names with a groupBy function. Now I want to sort my groups individual without loosing the month sorting in my groups. How is that possible?
var table = new Tabulator("#tableid", {
ajaxURL: url,
layout: "fitColumns",
groupBy: "codename",
groupBy:function(data){
if (data.codename == "X123") {
return "Productname for X123";
}
if (data.codename == "X124") {
return "Productname for X124";
}
…
…
},
initialSort:[
{column:"month", dir:"asc"}
],
columns: [
{ title: "Product", field: "codename"},
{ title: "Month", field: "month"},
…
…
…
]
});
Not exactly sure what you mean by "sort my groups individual", but is this what you're looking for ?
https://jsfiddle.net/r3f7pysw/
initialSort:[
{column:"month", dir:"asc"},
{column:"codename", dir:"asc"}
],
NOTE(1) : I dont think you want to return that string for your grouping, when it seems like its just the header Display string, and you're still going to be sorting on "codename" (becoz the string is the same with a change at the end, which really takes a "little" long to compare each time). But maybe you do...
NOTE(2) : Adding the seconds initialSort is like Ctrl-Click on the sorting to sort by multiple criteria. So if you single click on say, Month, remember that destroys the currentSort array and sets it just to Month.
I would like to display field value as character, but underlying data as number, so when i do search query, i am able to utilize numeric data, instead of displayed data.
example
{ title: 'Plant' , field: 'plant.name'},
But required
{ title: 'Plant' , field [ex: search-column]: 'plant.id' , field [ex: display]:'plant.name' },
Ahhh. coming back to tabulator after long time, it totally skipped my mind 🧠.
here is the solution
{ title: 'Plant' , field: 'plant.id',
formatter:function(cell){
// This is eager loaded data in Laravel
return cell.getRow().getData().plant.title;
}
},
Now , in you query, you can search relationship with
->orWhereHas('plant', function($q) use($request){
$q->where('title','LIKE',"%$request->search%");
})
I hope this helps out others as well 🙂
For example if I have a Mongoose schema with fields like title and body:
var Datum = db.model('Datum', {
title: { type: String },
body: { type: String },
}
Now I want to search both fields for a substring, I can do something like this:
Datum.find({
{ $or: [ { title: substring }, { body: substring } ] }
},
function(results) {
console.log(results)
})
but I'd like to give title a bigger weight, so for two entries, if one matched in title, another matched in body, I'd like the former to be returned in a higher order.
Is there anyway for mongoDB to return which condition matched in each result? Or do I have to search the database multiple times for this purpose?
when you create text indexes in MongoDB the default weight assigned to each indexed field is 1.
however if you want to give a particular field more weight you can include weights option when you create index and that will do the trick for you.
{
db.yourCollection.createIndex(
{
title: "text",
body: "text",
},
{
weights: {
title: 10,
body: 5
},
name: "myIndex"
}
)
}
afaik there is no function like match rate for non text indexes. (see satish chennupati answer for text index)
To cover that, mongo response need to be processed client side, to avoid expensive server calls, and depends on document number one check or loop need to be executed.
I have a datatable populated with aaData which is depicting the task created by users. Now, there is an action column in datatable which has two or three action buttons or logos like pdf - to view the user guide of that task, browse- link for the source code of the task and one is contributors logo which onclick should display the contributors for that particular task.
The aaData is of the following format which is populating the table
"aaData": [
[
"JSAG Home Page",
"JSAG Home page contains information about various POCs done",
"05/12/2012",
[
{
"displayValue":"Browse",
"link":"http://myTask.com/home",
"displayIcon" : "browselogo"
},
{
"displayValue":"Source Code",
"link":"svn/HomePage/trunk/",
"displayIcon" : "svnlogo"
},
{
"displayValue":"Audience Overview",
"link":"svn/Documents/Audience Overview.pdf",
"displayIcon" : "pdflogo"
},
{
"displayValue":"Contributors: ABC,XYZ",
"link":"#",
"displayIcon" : "people"
}
],
],
[
"Backlog",
"Backlog Forum application is designed to provide a platform for different groups to maintain backlog task items. ",
"25/08/2012",
[
{
"displayValue":"Browse",
"link":"http://mytask.com/BacklogApp",
"displayIcon" : "browselogo"
},
{
"displayValue":"Source Code",
"link":"svn/trunk/webapp-project/",
"displayIcon" : "svnlogo"
},
{
"displayValue":"Contributors: ABC",
"link":"#",
"displayIcon" : "people"
}
],
]
]
This format is for all datatables and contributors logo is there in all. What i wanted was, when user clicks the contributors icon, he should be able to see those contributors "ABC, XYZ, PQR".
I thought of fetching the action column data and then $each() the contributors array but i am not able to proceed with it.
How can i achieve this thing? How can i pick up the column value onclick because each datatable is being populated dynamically.
Please help.
Below is the code to populate a contributors div
$(document).on('click', '#contributor', function(contributors){
$.each(contributors, function(i, data) {
var ul_data = "<li><h3>"+ data+ "</h3></li>";
$("#contributors_div").append(ul_data);
});
}
$('#contributors_div').show();
});
How do i getrecentActdata as my contributors JSON array
Its going to be similar to this, provided you are declaring you datatable in the variable oTable
$(document).on('click', '#contributor', function(){
var aPos = oTable.fnGetPosition( $(this) );
console.log(aPos);
//if aPos returns an array in console, use first val at pos zero to get row data
var aData = oTable.fnGetData(aPos[0]);
console.log(aData);
// inspect your returned object, then tailor your $.each iteration
$.each( aData["contributors"], function(i, data) {
var ul_data = "<li><h3>"+ data+ "</h3></li>";
$("#contributors_div").append(ul_data);
});
}
$('#contributors_div').show();
});