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.
Related
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; }
}
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.
Here is the code i am using
$(document).ready( function() {
$('.d-table').dataTable( {
"responsive": true,
"columnDefs": [ { "targets": 0,"searchable": false, 'bSortable': false } ]
});
})
This code is disabled first column sorting but I want to disable Sorting completely while i sort other columns.
For disabling the particular column sorting you can specify column index for disabling as below
For first column :
"columnDefs": [ {
"targets": 0,
"orderable": false
} ]
If you want to disable the sorting completely in DataTable. There is property called "bSort" you can set it to "false" it will remove the sorting from whole table.
like below
$('.d-table').dataTable( {
"bSort": false
});
Demo : https://jsfiddle.net/Prakash_Thete/k1pm5ne0/
How could one do ColumnDef for two targets with different properties for each?
ie
columnDefs: [{ // for first column
targets: 0,
visable: false,
}],
columnDefs: [{ // for last column
targets -1,
className: 'last',
data: null,
orderable: false
}]
Reason is, I have the row ID as the first column, which the user doesn't need to see, but the data has to be there to be sent to a "upadate.php", to (as the name may suggest) update a MySQL table. The last column contains actions to edit the row.
It's not the end of the world if this simply isn't possible, as the end user is trusted with this information. This is simply to prevent an accidental change in the row ID.
Thanks in advanced.
I recently stumbled upon a workaround on how to do this. The code goes like this.
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true,
columnDefs: [ {
targets: -1,
data: null,
defaultContent: "<div style='text-align:center'><a class='btn btn-default'><i class='fa fa-search'></i></a> <a class='btn btn-default'><i class='fa fa-pencil'></i></a> <a class='btn btn-default'><i class='fa fa-times'></i></a></div>"
},
{
targets: 4,
orderable: false
} ]
});
});
See the columnDefs section. I targeted the last column and the second part is i targeted a specific column.
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] }
]