I am using jquery datatables.net and I have a table with information. In the one column I have true or false values for whether the user is active or not. I am trying to get it so when the value is false, highlight the value. Right now my code for my table settings looks like this:
//Settings for datatable
$('#userTable').DataTable({
"jQueryUI": true,
"serverSide": true,
"ajax": {
"type": "POST",
url: "/Management/StaffGet",
"contentType": 'application/json; charset=utf-8',
'data': function (data) { console.log(data); return data = JSON.stringify(data); }
},
"columns": [
{ "data": "employeeNumber" },
{ "data": "firstName" },
{ "data": "lastName" },
{ "data": "role" },
{
"data": "active",
},
{
"data": "employeeNumber",
"render": function (data, type, full, meta)
{
return 'Edit | Delete ';
}
}
],
"order": [[ 0, "asc"]],
"paging": true,
"deferRender": true,
"processing": true,
"stateSave": false,
"lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"pageLength": 10,
"pagingType": "simple_numbers",
"searching": false,
"createdRow": function ( row, data, index ) {
if (data[4] == "false" ) {
$('td', row).eq(5).addClass('highlight');
}
}
});`
Then my code for css is:
`<style type="text/css">
td.highlight {
font-weight: bold;
color: red;
}
</style>`
I feel like there is a problem with the setting on the column, any help is appreciated.
Try
$('#userTable').DataTable({
...
"createdRow": function( row, data, dataIndex ) {
//console.log(data[4]);
if ( data[4] == "false" ) {
//console.log($(row).find("td").eq(4).html());
$(row).find("td").eq(4).addClass( 'highlight' );
}},
...
The commented log statements are in there to check you are getting and comparing the correct data.
Tested with datatables 1.10.1
Related
i created a table with jquery datatables. when I want to filter my table with search bar, the browser gives me an alert DataTables warning: table id=grid - Ajax error. For more information about this error, please see http://datatables.net/tn/7.
this is my code :
$("#grid").dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"searching": true,
"language": {
"url": "/translate/datatables.fa-IR.json"
},
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax": {
"url": serviceBase + "/Auth/Admin/SearchOrders2/",
"type": "GET",
'beforeSend': function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + localStorageService.get("authorizationData").token);
}
},
"columns": [
{ "data": "customerContact", "orderable": true },
{ "data": "isDone", "orderable": true },
{
"mRender":
function (data, type, row) {
var xxx = $scope.name1 = $filter("jalaliDateFromNow")(row["createdDate"]);
return "<span>" + $filter("jalaliDateFromNow")(row["orderCreationTime"]); +'</span>';
}, "orderable": true
},
{ "data": "totalPrice", "orderable": true },
{ "data": "count", "orderable": true },
{ "data": "description", "orderable": true },
{
"mRender": function (data, type, row) {
return '<button class="btn btn-sm btn-circle green tooltips" disabled="disabled"><i class="fa fa-check"></i><span>جزئیات</span></button>'
},
"orderable": false
}
],
"order": [[0, "desc"]]
});
which part of my code is wrong?
I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.
my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})
you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();
following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);
In the Table I got 2 columns that I want the same link with attached ID from the item. The frist one from the ID it selft works, But I what to attach the ID to the link of the name it self.
Below is my code to initialize the datatable.
<script>
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data.txt",
"processing": true,
"columns": [
{ "data": "id", "name": "id",
"render": function (data, type, JsonResultRow, meta) {
return ' '+data+' ';
}
},
{ "data": "dob", "name": "dob",
"render": function (data, type, JsonResultRow, meta) {
return '<img src="/img/userpics/'+data+'">';
}
},
{ "data": "name", "name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = THIS_IS_WHAT_I_CANT_DO ;
return ' '+data+' ';
}
},
{ "data": "position", "name": "position" },
{ "data": "status", "name": "status" }
],
responsive: true,
'iDisplayLength': 6,
"order": [[ 0, "asc" ]],
"lengthMenu": [[50, 100, 500, 1000, -1], [50, 100, 500, 1000, "All"]],
"pageLength": 50
} );
} );
</script>
I think you can get all the data from the row inside the JsonResultRow. You can try console.log(JsonResultRow) to view all the data for the row.
{ "data": "name",
"name": "name",
"render": function (data, type, JsonResultRow, meta) {
var varempid = JsonResultRow['id'];
return ' '+data+' ';
}
},
So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.
Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.
How can I resolve this?
When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.
Initialisation code:
$('#item-search').DataTable( {
ajax: {
"data": {
type: "map_items",
map_id: this.map_id
},
"dataSrc": (r) => {
console.log(r);
return r.data;
},
type: "POST",
url: "src/php/search.php"
},
autoWidth : false,
columns: [
{
"data": "brand"
},
{
"data": "name"
},
{
"data": "quantity"
},
{
"data": "measurement"
},
{
"data": "type"
},
],
dom: 'rtlip',
language: {
"info": "Showing page _PAGE_ of _PAGES_",
"infoFiltered": ""
},
lengthMenu: [ 1, 2, 3 ],
pageLength: 1,
processing: true,
responsive: true,
scrollX: true,
select: {
style: "multi"
},
serverSide: true
});
In data table initialization include following property.
autoWidth : true
Along with add this
"fnInitComplete": function(oSettings) {
$( window ).resize();
}
"fnDrawCallback": function(oSettings) {
$( window ).trigger('resize');
}
DataTable should be initialized with the following code to achieve horizontal scrolling:
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns": {
"leftColumns": 1
}
This work in my angular project
this.dtTarifas = {
scrollX: true,
autoWidth: false,
lengthChange: false,
responsive: false
}
I have in my package.json "angular-datatables": "7.0.0"
$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
I have recently started working on datatables and have so far with help from some genues in the community been able to get to a point in my code so far. The issue I have is
1: when I refresh my browser, because it takes few seconds to display the datas, the table headings all appears to be merged together
2: Also I am using datatables v1.10.x and i tried using the new APIs like alertTable.clear().draw(); instead of dataTable().fnClearTable(); but I am getting alertTable.clear is not a function. I noticed changing from dataTable to DataTable seems to have an effect but it still does not work.
Any help will be much appreciated as I am still new to this plugin.
Code:
<script type="text/javascript" charset="utf-8">
var red=0;
var orange=0;
$(document).ready(function (){
setInterval (function(){
$.getJSON("ajax/maint1_json.txt", function (pcheckdata){
<!-- ------------------- Extract all Alerts ---------------------- -->
if (!$.fn.DataTable.isDataTable('#alert-table')) {
$('#alert-table').dataTable({
"bInfo": false,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"data": pcheckdata.alerts,
"aaSorting": [[ 3, "desc" ]],
"columns": [
{ "mData": "source" },
{ "mData": "host" },
{ "mData": "description" },
{ "mData": "value" }
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
if ( aData.value == "5" )
{
$('td', nRow).css('background-color', 'Red');
red++;
}
else if ( aData.value == "4" )
{
$('td', nRow).css('background-color', 'Orange');
orange++;
}
},
"aoColumnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"mRender": function( data, type, full ) {
if (data == "0") {
return '<input class="button" type="button" id="ack-action" value="Acknowledge Alert" onclick="<-- call a function to modify value -->;">';
}
return data;
}
}
],
<-- if json value is null or empty -->
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax ({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
},
"fnDrawCallback": function ( oSettings ) {
$('.alertcount-red').empty().append(red);
$('.alertcount-orange').empty().append(orange);
red=0;
orange=0;
}
});
} else
{
$('#alert-table').dataTable().fnClearTable();
$('#alert-table').dataTable().fnAddData(pcheckdata.alerts);
$('#alert-table').dataTable().fnAdjustColumnSizing();
}
if (!$.fn.DataTable.isDataTable('#error-table')) {
<!-- ------------------- Extract all Errors ---------------------- -->
$('#error-table').dataTable({
"bInfo": false,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"data": pcheckdata.errors,
"columns": [
{ data: 'host' },
{ data: 'description' }
],
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax ({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
}
});
} else
{
$('#error-table').dataTable().fnClearTable();
$('#error-table').dataTable().fnAddData(pcheckdata.alerts);
$('#error-table').dataTable().fnAdjustColumnSizing();
}
});
}, 10000);
});
</script>