Develop Reference

Datatables sorting - how to ignore text in column?

I have used this script to sort my datatable and ignore text that I do not want to sort, I'll explain.
this is the column example:
10,836
↑(10.71%)
14,836
↑(13.71%)
I want to ignore this: ↑(10.71%) and to sort according to this: 10,836.
thats my script:
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"justNum-pre": a => parseFloat(a.replace(/\D/g, "")),
"justNum-asc": (a, b) => a - b,
"justNum-desc": (a, b) => b - a
});
$(document).ready(function () {
var table = $('#dataTable').DataTable({
order: [[ 1, "desc" ]],
scrollY: 200,
scrollX: false,
responsive: true,
paging: false,
//colReorder: true,
//pageLength: 100,
columns: [
{
"render": function(data, type, row){
return data.split(" ").join("<br/>");
}
},
null,
null,
null,
null,
null,
null
],
columnDefs: [
{ className: "all", "targets": [ 0, 1, 3, 6 ] },
{
type: 'justNum',
targets: 1
}
]
});
});

You can do this using the DataTables orderData feature.
For example, assume your formatted data is in the first column:
10,836
↑(10.71%)
Add a second column containing only the numeric portion (no text) 10836 and define it as a hidden column.
Then, create a columnDefs section in your datatable definition - something like this:
$('#demo').DataTable( {
"columnDefs": [
{ "orderData": [ 1 ], "targets": 0 },
{ "visible": false, "targets": 1 }
]
} );
} );
This says that the first column (target index 0) will use the data in the second column (target index 1) for sorting. And the second column will be a hidden column.

Custom indentation rule for eslint in arrays and objects

I could not find any standard rules for such indentation in arrays and objects. I need aliment by identificators ( ignoring brackets ). For our code style this approach is more convinient.
// default indent is 4 spaces
webix.ui({
view: "popup",
id: "group_name_edit",
position: "center",
body: {
padding: 20,
rows: [
input,
{ cols: [ // <-------- sample line
{},
{ view: "button",
label: "Ok",
width: 150,
},
]
}
]
},
});

You could combine the indent and object-curly-newline rules:
rules: {
"indent": ["error", 4, { "SwitchCase": 1 }],
"object-curly-newline": ["error", { "minProperties": 1 }]
},
I copied your sample and applied auto-fix and this is the result:
webix.ui({
view: "popup",
id: "group_name_edit",
position: "center",
body: {
padding: 20,
rows: [
input,
{
cols: [
{},
{
view: "button",
label: "Ok",
width: 150,
},
]
}
]
},
});
If you also want to enforce line breaks in arrays (which is not neccessary based on the given sample, as there already are line breaks), you could also add array-bracket-newline: ["error", "always"] to the rules.

DataTable rows aren't turning into hrefs

I created a table with DataTables and at first the document titles that were rendered (from a local JSON file) were wrapped around anchor tags and turned into hrefs. I made some changes to my DataTable initialization and added some new columns to my table, and those things might have prevented the doc titles from turning into hrefs. I'm not 100% sure.
Importing table data:
loadTableData() {
$.noConflict();
let tableRes = KMdocs.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).map(function(obj) {
return {
"Path": obj.EncodedAbsUrl,
"Titles": obj.File.Name,
"Categories": obj.ResourceType.results.map(function(val) {
return val.Label;
}).join(";"),
"Blank": ""
}
});
}
Rendering table:
$('#km-table-id').DataTable({
columns: [
{ data: "Blank" },
{
data: "Titles",
columnDefs: [ // ----- I believe the issue is with this block
{
data: "Path",
ordering: true,
targets: [ 1 ],
render: function(data, type, row) {
return $('<a>')
.attr({target: "_blank", href: row.Path})
.text(data)
.wrap('<div></div>')
.parent()
.html();
},
targets: [1]
}
],
},
{
data: "Categories",
searchable: true,
targets: [ 2 ],
visible: false
},
{
data: "Blank"
}
],
data: tableRes,
language: { searchPlaceholder: "Search All Documents" },
lengthMenu: [ 10, 25, 50, 100, 250, 500 ],
order: [],
pageLength: 500,
paging: true,
pagingType: "full_numbers",
responsive: true,
scrollCollapse: true,
scrollXInner: true,
scrollY: 550,
sDom: '<"top">rt<"bottom"flp><"left">' // puts dropdown on bottom
});
HTML snippet:
<table id="km-table-id" class="cell-border display stripe-hover">
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Categories</th>
<th>My Favorites</th>
</tr>
</thead>
<tbody></tbody>
</table>

Datatables programmatically apply filter

I used the datatables jquery plugin to display a list which is loaded using an ajax call to the server.
I used the bFilter property in order to hide the filter because I want to put the search input inside my sidebar.
$(function () {
var generatedCustomerTable = $('#ItemsTable').DataTable({
"order": [[0, "desc"]],
"bSort": true,
processing: true,
serverSide: true,
ajax: {
url: "/api/Ajax/Test",
method: "POST",
},
columns: [
{ visible: false, data: "id" },
{ orderable: false, data: "name" },
{ orderable: false, data: "value" },
],
bLengthChange: false, // Hide the page size
bFilter: false, // Hide the search box
ordering: true,
paging: true,
pagingType: "full_numbers",
pageLength: 10,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
});
$("#btnTest").click(function () {
// I WANT HERE TO SET THE FILTER
generatedCustomerTable.draw();
});
});
I want programmatically to set the filter text but I have not found a way to do it.
Is there some kind of function which will allow me to set the filter value so that I will be able to call the .draw() method in order to refresh the contents of the list.

In your code , By setting the bFilter to false will not only hide the search box but it'll disable also the search function from the dataTable ,
In order to create your own custom search box , you have to enable the bFilter, and then either hide the default search control with css (recommended ) by setting :
.dataTables_filter {
display:none;
}
, or you make your own table rendering using sDom | other link
See below Snippet :
var dataSet = [
[ 1, "Name 1","one" ],
[ 2, "BRimos", "JS" ],
[ 3, "pitaridis","Data" ],
[ 4, "Stack", "overflow" ],
[ 5, "Name 2","two" ],
[ 6, "Name 3","three" ],
[ 7, "Name 4","one" ],
[ 8, "BRimos 2", "JS" ],
[ 9, "pitaridis 2","Data" ],
[ 10, "Stack 2", "overflow" ],
[ 11, "Name 5","two" ],
[ 12, "Name 6","three" ]
];
$(function () {
var generatedCustomerTable =$('#ItemsTable').DataTable( {
"order": [[0, "desc"]],
"bSort": true,
data: dataSet,
columns: [
{ visible: false,title: "id" },
{ orderable: false,title: "name" },
{ orderable: false,title: "value" }
],
bLengthChange: false, // Hide the page size
bFilter: true, // Hide the search box
ordering: true,
paging: true,
pagingType: "full_numbers",
pageLength: 5,
language: {
paginate: {
first: '«',
previous: '‹',
next: '›',
last: '»'
},
aria: {
paginate: {
first: 'First',
previous: 'Previous',
next: 'Next',
last: 'Last'
}
}
}
} );
$("#btnTest").click(function () {
console.log($("#filter").val(),generatedCustomerTable);
generatedCustomerTable
.search($("#filter").val()).draw();
});
});
.dataTables_filter {
display:none;
}
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<input id="filter" type="text" />
<button id="btnTest">search</button>
<table id="ItemsTable" width="100%"></table>

How to sort only certain columns

I am using jQuery DataTables plugin to sort table data. I have four columns: Name, Position, Office and Age. What I want is user to be able to sort only Name and Age columns, not all the columns. But I am not able to stop sorting on OTHER columns. Can you please suggest something?

This code disable sorting, 0 - index of column.
For old version
aoColumnDefs: [
{
bSortable: false,
aTargets: [ 0 ]
}
]
for DataTables 1.10+
columnDefs: [
{ orderable: false, targets: 0 }
]
Especially for example, you need this
$(document).ready(function() {
$('#example').dataTable( {
"order": [[ 0, "desc" ]],
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
null
]
} );
} );
fiddle