DataTable is able to create.Now i can only able to search the column named 'No'. My requirement is to search any number of desired colums of the datatable.Is there any problem by doing like this? can anyone help?
dmhTable = $('#tableId').dataTable({
"bProcessing": true,
"bDestroy": true,
"bServerSide" : true,
"bLenthChange" : false,
"iDisplayLength" : 10,
"sAjaxSource" : "searchHistoryByFromAndToDate.html?fromDate="+ $('#txtFromDate').val() +"&toDate="+ $('#txtToDate').val(),
"oLanguage" : {
"sSearch" : "Search"
},
"aoColumns" : [{"sTitle" : "Sl No","mData" : null,"aTargets": [ 0 ],
"fnRender" : function(obj) { var columnIndex = obj.oSettings._iDisplayStart + obj.iDataRow+1
return columnIndex;
}
},
{"sTitle" : "ID","mData" : "ID", "bSearchable" : false,"bVisible":false},
{"sTitle" : " No","mData" : "No", "bSearchable" : true},
{"sTitle" : " Type","mData" : "Type", "bSearchable": true},
{"sTitle" : "Message","mData" : "Message", "bSearchable": true}
],
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
});
},
"sPaginationType" : "full_numbers"
});
Related
function PERSYARATAN() {
$('#persyaratan_table').DataTable({
"columns": [{
"orderable" : true,
"class" : "text-center",
"width" : "5%",
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : true,
"class" : "text-left",
// "class" : "hide_column",
},
{
"orderable" : true,
"class" : "text-left"
},
],
order: [[3, 'asc']],
rowgroup: {
dataSrc: 3
},
"processing": true,
"serverSide": true,
"autoWidth" : false,
"searching" : true,
"stateSave" : true,
"bDestroy" : true,
"iDisplayLenght" : 10,
"sPaginationType": "simple_numbers",
"language": {
"url": "../plugins/datatables/Indonesian.json"
},
"ajax": function (data, callback, settings) {
$.ajax({
"url" : "/persyaratanperaturanizin",
"type" : "GET",
"data" : data,
"error" : function(xhr) {
ERROR_ALERT(xhr);
callback({
draw: 1,
data: [],
recordsTotal: 0,
recordsFiltered: 0
});
},
"success": function (data) {
var respons = data.respons;
if (respons.success == 1) {
no = respons.data.data.lenght;
callback(respons.data);
}
}
});
}
});
}
Thats my js code datatable
i want to use row group datatable and i get this error
Uncaught TypeError: Cannot set properties of undefined (setting 'RowGroup')
https://i.stack.imgur.com/W6STt.png
i already call
https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap4.min.css
and
https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js
how fix this error
Data is not populating inside the table. But when I am opening console or performing addRow operation, data gets updated.
Below is the code:
$(document).ready(function() {
$.get("./resources/json/result.json", function(data, status) {
createEmpDetailTbl(JSON.parse(data));
});
function createEmpDetailTbl(jsonData) {
table = new Tabulator("#emp-detail-table", {
data : jsonData,
height : "100%",
layout : "fitColumns",
tooltips:true,
tooltipsHeader: true,
addRowPos:"top",
pagination : "local",
paginationSize : 10,
columns : [ {
title : "Actions",
field : "username",
//sorter : "string",
width : 100,
frozen : true,
headerSort : false,
formatter : actionRowIcon,
cellClick : function(e, cell) {
//console.log("Event Source: "+e.srcElement.id);
//console.log("Cell Value: "+cell.getValue());
if('del' == e.srcElement.id){
var row = cell.getRow();
row.delete().then(function(){
//run code after row has been deleted
alert('Row Deleted Successfully');
$.ajax({
url: "/YourController",
cache: false,
dataType: "json",
success: function(data) {
//$("#content").html(data);
}
});
})
.catch(function(error){
//handle error deleting row
});
var rowIndex = row.getIndex();
//console.log('Row Data: '+row);
//console.log('Row Position: '+row.getPosition(true));
}
}
}, {
title : "Employee ID",
field : "username",
//sorter : "string",
width : 120,
align : "left",
headerSort : false,
editor:"input",
frozen : true
}, {
title : "Full Name",
field : "fname",
//sorter : "string",
width : 120,
align : "left",
headerSort : false,
frozen : true
}, {
title : "Email Address",
field : "email",
//sorter : "string",
width : 170,
align : "left",
headerSort : false,
cellClick : function(e, cell) {
//console.log("cell click")
},
}, {
title : "OUC",
field : "ouc",
//sorter : "string",
width : 70,
align : "left",
headerSort : false
}, {
title : "LOB",
field : "lob",
width : 70,
align : "left",
headerSort : false,
//sorter : "string"
}, {
title : "Type of Redundancy",
field : "tyRedun",
//sorter : "string",
width : 120,
align : "left",
headerSort : false,
}, {
title : "Type of Notice Period",
field : "tyNoticePeriod",
//sorter : "string",
width : 80,
align : "left",
headerSort : false
}, {
title : "Notice Period",
field : "noticePeriod",
//sorter : "string",
width : 70,
align : "left",
editor:"select",
editorParams:{values:["1 Month", "2 Month", "3 Month", "4 Month"]},
headerSort : false
}, {
title : "Proposed Exit Date",
field : "proExitDate",
//sorter : "date",
width : 80,
align : "left",
headerSort : false
}, {
title : "Consultation Manager UIN",
field : "conManagerUin",
width : 80,
align : "left",
headerSort : false
//sorter : "number",
}, {
title : "Consultation Date",
field : "conDate",
//sorter : "date",
width : 80,
align : "left",
headerSort : false
}, {
title : "Pension Contribution",
field : "pensionContri",
//sorter : "number",
width : 100,
align : "left",
headerSort : false
}, {
title : "Car Cash Allowance",
field : "carCashAllowance",
//sorter : "number",
width : 100,
align : "left",
headerSort : false
} ],
renderStarted:function(){
$('#loading').show();
},renderComplete:function(){
$('#loading').hide();
},
cellEdited:function(row){
//row - row component
//console.log('Changed......'+row.getData().username);
$.ajax({
type: 'GET',
//url: './resources/json/employee.json',
url: projectOptions.restUrl+'employee/'+row.getData().username,
dataType:'text',
contentType: 'application/json; charset=utf-8',
beforeSend:function(){
$('#loading').show();
},
success:function(response) {
if(response != ""){
var data=[];
data.push(response);
console.log(JSON.parse(data));
//table.updateData(JSON.parse(data));
table.addData(JSON.parse(data));
$('.alert').hide();
} else{
$('#error-txt').text('').text('Employee data not found.');
$('.alert').show();
}
},
complete:function(){
$('#loading').hide();
},
error:function(err, xhr, msg){
alert(err+"-------------------"+xhr);
}
});
}
});
}
JSON:
[{
"dn": null,
"username": "23456789",
"password": null,
"displayName": null,
"fname": "John",
"lname": "Smith209884",
"email": "x.x#wer.com",
"ouc": "TBS23B",
"lob": "wer",
"jobcode": "STST05",
"employer": "NO Plc",
"ldg": "GB LDG",
"origHireDate": "1980-09-01",
"serviceDate": "1980-09-01",
"terminationDate": null,
"authorities": [],
"accountNonExpired": true,
"accountNonLocked": true,
"credentialsNonExpired": true,
"enabled": true,
"timeBeforeExpiration": 2147483647,
"graceLoginsRemaining": 2147483647,
"name": "John Smith209884"
}]
There is no need to make the GET request yourself, Tabulator can do that for you.
Instead of using the data property, use the ajaxURL and pass it the url:
table = new Tabulator("#emp-detail-table", {
ajaxURL: "./resources/json/result.json",
height : "100%",
layout : "fitColumns",
...
});
If the table isnt loading the data it suggests it is in the wrong format, have you checked your console logs? Tabulator will leave a message in the logs explaining why it cant load the data. it will be expecting an array of objects:
[
{...},
{...},
]
How to refresh the Datatable, When new Json data is sent
POST request Receives data , which is sent to LoadTable function to populate the datatable.
function initializeTable(){
$("#submitbutton").on(
'click',
function(){
$.ajax({
type : 'POST',
url : 'rest/log/events',
data : {
fromTime : $("#fromTime-filter").val(),
toTime : $("#toTime-filter").val(),
Text : $("#search-filter-input").val()
},
success : function(data) {
loadTable(data);
},
error : function(jqXHR, textStatus, errorThrown) {
showAjaxError(jqXHR, textStatus, errorThrown,
$("#error-msg"));
}
});
});
}
'data' is passed to Load function, which loads the data to a table correctly the first time.
When i submit the POST request the second time, i see New 'data' in the browser console, but the Datatable is not refreshed.
But when i Refresh the Page(datatable is cleared) and then do a new POST, new data loads normally. I want the new data to be loaded without the need to refresh the page.
function loadTable(data)
{
$('#report-table').dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
}
It looks to me like you're using DataTables v1.9. Here's how I'd do it:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnUpdate(data);
}
}
Another option:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnDestroy();
loadTable(data);
}
}
I am using JQuery Datatables Plugin (datatable). I want to disable reordering of columns,
Below is my code.
.DataTable({
"serverSide" : true,
"bFilter": false,
"bInfo": false,
responsive: true,
sDom: "Rlfrtip",
"pagingType" : "simple_numbers",
"pageLength" : 10,
"bLengthChange" : false,
"drawCallback":enableTimer(trainingTableRefreshFrequency),
"ajax" : {
"url" : getAllTraniningServiceUrl,
"data" : function(d) {
d.searchKey=$("#searchKey").val();
d.searchValue=$("#searchValue").val();
},
type : 'POST'
},
"language": {
"emptyTable": "No Data Available"
},
"columns" : [ {
"orderable" : false,
"searchable" : false,
"data" : null,
]
});
What are the ways to disable reordering of columns.
I have this class:
function Clazz() {
this.id;
this.description;
}
Clazz.prototype._insert = function(_description, _success, _error) {
this.description = _description;
$.ajax({
type : "PUT",
url : "api/route",
data : JSON.stringify(this),
dataType : "json",
contentType : "application/json;charset=UTF-8",
success : function() {
_success($("#message"), 'OK');
},
error : function() {
_error($("#message"), 'FAIL');
}
});
};
Clazz.prototype._findAll = function(_callback) {
$.ajax({
type : "GET",
url : "api/route",
dataType : "json",
success : function(data) {
_callback(data);
}
});
};
On the button click, I have this:
var clazz = new Clazz();
clazz._insert($("#description").val(), success, error);
clazz._findAll(loadCallback);
Below the loadCallback method:
function loadCallback(data){
var oTable = $('#table').dataTable({
"bRetrieve": true,
"bDestroy" : true,
"bFilter" : false,
"bLengthChange" : false,
"bInfo" : false,
"sDom" : "<'row'<'span5'l><'span5'f>r>t<'row'<'span5'i><'span5'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sProcessing" : "Loading ...",
"sZeroRecords" : "No records",
"oPaginate" : {
"sNext" : "",
"sPrevious" : ""
}
},
"iDisplayLength" : 4,
"aaData" : data,
"aoColumnDefs" : [
{ "aTargets" : [0], "mData" : "description", "sTitle" : "My Data" },
{ "aTargets" : [1],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img01.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [2],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img02.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [3],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img03.png" style="height: 20px; width: 20px;"/>';
}
}
],
"fnHeaderCallback" : function( nHead ) {
$(nHead.getElementsByTagName('th')[0]).attr("colspan","4");
for(var i = 1; i <= 3; i++){
$(nHead.getElementsByTagName('th')[1]).remove();
}
},
"fnRowCallback" : function( nRow ) {
$(nRow.getElementsByTagName('td')[1]).attr("width","20px");
$(nRow.getElementsByTagName('td')[2]).attr("width","20px");
$(nRow.getElementsByTagName('td')[3]).attr("width","20px");
}
});
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
I want that the method clazz._findAll(loadCallback); only execute after the clazz._insert finish.
I already tried $.when but it did not work.
$.when should work if clazz._insert returns the $.ajax function call (which it currently does not).
If you return the $.ajax call, you should be able to do something like:
$.when(clazz._insert(...stuff...)).then(clazz._findAll(...stuff...));
Might be a good idea to double-check the documentation on deferred objects.
I solved doing this:
Putting return $.ajax(...stuff...) in the insert method
Using
$.when(clazz._insert($("#description").val())).done(
function(){
clazz._findAll(loadCallback);
}
);
I had to call the _findAll inside an anonimous function.