DataTable set class and background for a TD - javascript

I am having big issues assigning a custom class to a TD in DataTables in order to change the background color based on the value of it. It seems like the class is getting assigned, but I am not able to get the if-statement working.
Here is my columnDefs
"columnDefs": [
{ className: "dt-center test", "targets": [ 7 ] },
//{ "sClass": "test", "aTargets": [ 7 ] },
{ className: "dt-center", targets: '_all' },
{ className: "dt-justify", targets: '_all'},
{ targets: [0, 1, 2, 3, 7], visible: true},
{ targets: '_all', visible: false },
]
Here is my JavaScript If-statement
$(".test").each((index, element) => {
if (element.innerText >= 0) element.classList.add("green");
else element.classList.add("red");
});
My CSS
.green {
background-color: green !important;
}
.red {
background-color: red !important;
}
Any help would be very much appreciated on this matter - It has bugged me out for a while now.

Related

Swiper slider dynamic pagination

I'm using swiper slider and don't know how to get rid of the empty space when the slider comes to the first or last element, can you tell me please
https://monosnap.com/file/jLTCNd8CIT82h6WNqGbP5qxVKWkS8d
Tried find some property in Swiper slider API and make styles
{
"loop": true,
"slidesPerView": 3,
"observer": true,
"loopFillGroupWithBlank": true,
"slidesPerGroup": 1,
"initialSlide": 3,
"navigation": {
"nextEl": ".collection-slider-2-swiper-button-next",
"prevEl": ".collection-slider-2-swiper-button-prev"
},
"pagination": {
"el": ".swiper-pagination",
"dynamicBullets": true
},
"breakpoints": {
"320": {
"slidesPerView": 2,
"spaceBetween": 20,
"pagination": {
"type": "progressbar"
}
},
"1024": {
"slidesPerView": 2,
"pagination": {
"type": "bullets"
}
},
"1440": {
"slidesPerView": 3,
"spaceBetween": 30
}
}
}

How can I decode JSON Unicode using jQuery in a Select2 dropdown filter

I am using Select2 JS and Datatables JS. The data is in JSON format. The data for one value should display as Animal & Veterinary. In JSON it appears as Animal \u0026amp; Veterinary. The Select2 filter displays it as Animal & Veterinary. How can I add a function to the JS below that will decode the Unicode? Below is a function that can work but I dont know how to add it to the JS below.
var title = 'Animal & Veterinary';
function stringToSlug (title) {
return title.toLowerCase().trim()
.replace(/&/g, 'and')
}
Below is the script. This is where I would like to pass the function into the filter. "select2config"
jQuery( document ).ready( function($) {
'use strict';
// Check condition first if the table class exists then run this init.
if ($('.lcds-datatable--advisory-committee-materials').length > 0) {
let pageClass = function () {
let el = $( 'ul.pagination' ).addClass('pagination-sm');
}
// define order of table's control element
let domStyling = "<'row'<'col-sm-12'lB>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>";
var otable9 = $('table.lcds-datatable--advisory-committee-materials').DataTable( {
// Sort of first date column descending.
order: [[0, 'desc']],
deferRender: true,
deferLoading: 50,
dom: domStyling,
ajax: {
"url": "/datatables-json/advisory-committee-materials-json",
//"url": "/sites/default/files/actest1.json",
"dataSrc": ""
},
processing: true,
columns: [
{ "data": "field_publish_date" }, // publish_date 0
{ "data": "title" }, // node title summary 1
{ "data": "field_site_structure" } // site_structure Committee/Topic 2
],
columnDefs: [
{
"type": "date",
"targets": [ 0 ]
}
],
pageLength: 10,
searching: true,
autoWidth: false,
responsive: true,
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
buttons: [
{
extend: 'excel',
text: 'Export Excel',
exportOptions: {
columns: [ 0, 1, 2 ]
}
}
],
initComplete: pageClass,
drawCallback: pageClass
}); // end datatable
// config and initialize filters
let select2config = {
maximumSelectionLength: 0,
minimumInputLength: 0,
tags: true,
selectOnClose: true,
theme: "bootstrap",
}
let search = $( '#lcds-datatable-filter--search' ).lcdsTableFilter({
table: otable9,
type: 'search'
});
let clear = $( '#lcds-datatable-filter--clear' ).lcdsTableFilter({
table: otable9,
type: 'clear'
});
// wait for ajax call to complete to load column data load
$('table.lcds-datatable--advisory-committee-materials').on( 'init.dt', function() {
let committee = $( '#lcds-datatable-filter--committee-topic' ).lcdsTableFilter({
column: 2,
table: otable9,
select2Options: select2config,
type: 'select',
dataType: 'datatable'
});
})
}}); // end ready function and condition if the table class exists.
I was able to pass in a function to alter the output of JSON so now the filter displays “Animal & Veterinary” not “Animal & Veterinary” By adding this below. The filter now displays Animal & Veterinary but selecting this in the filter does not match the value in the datatable?
let select2config = {
maximumSelectionLength: 0,
minimumInputLength: 0,
tags: true,
selectOnClose: true,
theme: "bootstrap",
escapeMarkup: function (text) { return text; }
}

Datatables target except the first column

Any idea how to use columnDefs property like below
var table = $('#myTable').DataTable( {
columnDefs: [
{ targets: [> 0], visible: true}
]
} );
Can I do that?
I need to target all columns except first column.
Take a look on the documentation .
var table = $('#myTable').DataTable( {
columnDefs: [
{ targets: [0], visible: false},
{ targets: '_all', visible: true}
]
} );
The first column will be hidden in the table while all others will be visible.

jquery datatable - set column width and wrap text

We are using the Scroller plugin for our jquery data table to allow virtual scrolling. However, we have requirement to support text wrapping inside a cell, as user would like to view the entire text instead of truncated one. I observed that it does not wrap the text by default. Is there a way to support this feature? Any possible workaround?
Fiddler
https://jsfiddle.net/Vimalan/2koex0bt/1/
html Code:
<table id="example" class="display" cellspacing="0" width="100%"></table>
js code:
var detailsSample = "DataTables and its extensions are extremely configurable libraries and almost every aspect of the enhancements they make to HTML tables can be customised. Features can be enabled, disabled or customised to meet your exact needs for your table implementations."
var dataList = [];
for (var i=1; i<=500; i++)
{
var dataRow = {};
dataRow.ID = i;
dataRow.FirstName = "First Name " + i;
dataRow.LastName = "Last Name " + i;
if (i%5 ==0)
{
dataRow.Details = detailsSample;
}
else
{
dataRow.Details = "Large text "+i;
}
dataRow.Country = "Country Name";
dataList.push(dataRow);
}
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details", "width": "400px" },
{ title: "Country", data: "Country" }
]
} );
Expectation
In the above table, the "Details" column should always have a width of 400px and the text in that column should wrap.
Any suggestion will be greatly appreciated.
Found the solution by wrapping the column data in a div and setting the white-space, width css properties for the div.
Fiddler:https://jsfiddle.net/Vimalan/2koex0bt/6/
JS
$('#example').DataTable( {
data: dataList,
deferRender: true,
scrollX: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
searching: false,
paging: true,
info: false,
columns: [
{ title: "ID", data: "ID" },
{ title: "First Name", data: "FirstName" },
{ title: "Change Summary", data: "LastName"},
{ title: "Details", data: "Details" },
{ title: "Country", data: "Country" }
],
columnDefs: [
{
render: function (data, type, full, meta) {
return "<div class='text-wrap width-200'>" + data + "</div>";
},
targets: 3
}
]
} );
CSS
.text-wrap{
white-space:normal;
}
.width-200{
width:200px;
}
Not sure if you add in stylesheets or not, but set your table-layout to fixed and add in the white-space. Currently you are using white-space:no-wrap which negates what you're trying to do. Also I set a max-width to all your td's so this will happen whenever there is overflow.
Add this at the end of your jQUery
https://jsfiddle.net/2koex0bt/5/
$(document).ready(function(){
$('#example').DataTable();
$('#example td').css('white-space','initial');
});
If you want to just use the api, do this ( add in anymore CSS to change the styling ).
If you want to do it with CSS, do this:
table {
table-layout:fixed;
}
table td {
word-wrap: break-word;
max-width: 400px;
}
#example td {
white-space:inherit;
}
Js Code:
'columnDefs': [{
render: function (data, type, full, meta) {
let instaText = (data != null && data.length > 25) ? data.substr(0, 25) : data == null?"":data;
return '<div class="text-overflow" title='+'"'+ data +'"' +'>' + instaText + '</div>';
},
targets: [27]
}],
CSS:
{
overflow: hidden;
text-overflow: ellipsis;
max-width: 80%;
}

DataTable cannot click the button after pagination

I have done a datatable and custom it's data but when i click the button on the first column, it only works on the first page and cannot click on other forward pages.
$('#tbl').DataTable( {
responsive: true,
data: data1,
autoWidth: false,
"order": [[ 7, "asc" ]],
"iDisplayLength": 5,
"pagingType": "full_numbers",
"dom": '<"top">rt<"bottom"p><"clear">',
"oLanguage": {
"sEmptyTable": "Not Record"
},
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
} );
BUT when for the click function in live mode, it still cannot work
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function () {
.......
} );
id's must be unique. We dont know your markup but
$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function ()
seems utterly wrong. Either you have multiple <a>'s with the same id #edit_current_product or the right thing actually happens, you have paginated away from the page where #edit_current_product is present.
I guess that what you really want is
$('#tbl').on('click', 'tbody tr a', function()
or use a class instead of an id
$('#tbl').on('click', 'tbody tr .edit_current_product', function()
BTW, why
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
you just need
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] },
{ "sClass": "dt-body-justify", targets : [1] }
]

Categories