We Keep Coding

column buttons missing from datatables column visibility

We have a datatable that looks like this. As you can see, when you click the column visibility button only a line is appearing:
var dataTableDefaults ={
columnDefs: [
{
"targets": -1,
"orderable": false,
"searchable": false
},
{
"targets": "noSearchOrSort",
"orderable": false,
"searchable": false
},
{
"targets": "noSort",
"orderable": false,
},
{
"targets": "noSearch",
"searchable": false
},
{
"targets": "invisible",
"visible": false
}
],
buttons: [
{
extend : 'colvis',
columns : ":visible"
}
],
order: [[0, 'asc']],
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
language: {
loadingRecords: 'Loading...',
emptyTable: 'No Data available'
},
pagingType: 'full_numbers',
processing: true
};
var cols = [
null,
null,
null,
{ "bVisible" : false }
];
jointDefaults = $.extend(true,{},dataTableDefaults);
jointDefaults.columns = cols
$('#table').DataTable(
$.extend(
jointDefaults,
{
bServerSide: true,
bProcessing: true,
sAjaxSource: 'ajax.php',
fnServerData: function(sSource, aoData, fnCallback) {
aoData.push(
{
name: 'gt',
value: 1
},
{
name: 'mode',
value: pageMode
},
);
$.ajax({
dataType: 'json',
type: 'GET',
url: sSource,
data: aoData,
success: function (response) {
fnCallback(response);
}
});
}
}
)
);
Why are the show/hide buttons on the column visibility not appearing?

on select autocomplete field fetch the record from database in handsontable

I want to auto fetch name and qty once code is selected.
Following is the code I tried.
var $container = $("#data");
var items = "";
$container.handsontable({
startRows: 8,
startCols: 3,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
colHeaders: ['CODE','NAME','QTY'],
afterChange : function(arr, op) {
alert('test'); //DOES NOT WORK...
},
columns: [
{
data:'code',
type: 'autocomplete',
source: function (query, process) {
$.ajax({
url: 'codes.php',
dataType: 'json',
data: {
query: query
},
success: function (response) {
process(response);
}
});
},
},
{
data: "name"
},
{}
]
});
The afterChange event does not work. I am following this fiddle http://jsfiddle.net/wvXvJ/15/.. It is working in there I have no idea what is wrong in the above code
Please help

How to push variable JavaScript into aodata datatable

I have variable named search_gen. This Variable is generated from ajax(code show below).
var search_gen;
$.ajax({
type: "POST",
url: link+module_name+'search_generator/'+module_active,
dataType: "text",
async: false,
success: function(data){
search_gen = data; //or something similar
}
});
for example this variable will contain a json data(show bellow)
{"name":"room_type_name","value":$("#room_type_name").val()},{"name":"room_type_code","value":$("#room_type_code"
).val()}
if i place json above without using variable it work example code bellow
table=$('#table').dataTable({
"sScrollY": "400px",
"bFilter": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": link+module_name+'populate_list/'+module_active,
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [ {
"targets": 0,
"orderable": false
},
{
"targets": -1,
"orderable": false
} ],
"fnServerParams": function (aoData) {
aoData.push({"name":"room_type_name","value":$("#room_type_name").val()},
{"name":"room_type_code","value":$("#room_type_code").val()})
}
})
and when I'm using variable and put into bracket aodata(seach_gen) (code Below)
table=$('#table').dataTable({
"sScrollY": "400px",
"bFilter": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": link+module_name+'populate_list/'+module_active,
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [ {
"targets": 0,
"orderable": false
},
{
"targets": -1,
"orderable": false
} ],
"fnServerParams": function (aoData) {
aoData.push(search_gen)
}
});
It shows an error like this.
enter image description here
My question is
how do I pass my variable search_gen into aodata.push()
Thank you

I assume you are not waiting for the first AJAX call to complete before calling .dataTable. Try following code:
var search_gen;
$.ajax({
type: "POST",
url: link+module_name+'search_generator/'+module_active,
dataType: "text",
async: false,
success: function(data){
search_gen = data; //or something similar
}
}).done(function( data ) {
table=$('#table').dataTable({
"sScrollY": "400px",
"bFilter": false,
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": link+module_name+'populate_list/'+module_active,
"iDisplayLength": 25,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [ {
"targets": 0,
"orderable": false
},
{
"targets": -1,
"orderable": false
} ],
"fnServerParams": function (aoData) {
//aoData.push(search_gen)
Array.prototype.push.apply(aoData,search_gen); // <<<<<<<<<<<< use this
}
});
});
Alternatively, you can call .dataTable inside success callback of first $.ajax and use data parameter in place of search_gen, like aoData.push(data).
EDIT:
Based on your comment I think search_gen is an array, in which case you will need to use Array.prototype.push.apply(aoData,search_gen); instead of aoData,.push(search_gen);. Check the code above.

How To Get Datatables Column's Value?

I want to get Datatables column's value. Here is my datatables script:
$(function () {
$('#kategoriTable').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"scrollX": false,
"ajax": {
"url" : "kugi/getDataKategori",
"dataSrc" : function(json) {
console.log(json);
return json.ProposalCategories
}
},
"columns": [
{ "data": "CategoryId"}, // I want to get this value, and then use it to edit the data
{ "data": "Name"},
{ "data": "Code"},
{ "data": "TypeName"},
{ "data": "IsAbstract"},
{ "data": "DefSrcOrganisationName"},
{ "data": null,
"bSortable": false,
"mRender": function (o) { return '<button class="btn btn-success btn-xs">Edit</button>'; }
}
]
});
});
After that I want to send this value to this code
return '<button class="btn btn-success btn-xs">Edit</button>'
How can I get the value of CategoryId then put it to XXXX ?
Thanks before.

You are close - you actually have access to all column values through the row param :
columns: [
{ data: "CategoryId" },
{ data: "Name" },
{ data: "Code" },
{ data: "TypeName" },
{ data: "IsAbstract" },
{ data: "DefSrcOrganisationName" },
{ data: null,
sortable: false,
render: function(data, type, row) {
return '<a href="kugi/edit_usulan_kategori/'+row.CategoryId+'">'+
'<button class="btn btn-success btn-xs">Edit</button></a>'
}
}
]
documentation here -> https://datatables.net/reference/option/columns.render

jQuery DataTable column filters with delay search until 3+ characters or enter key

I'm try to achieve that, but so far not working. Tried those suggestion either in stackoverflow or datatables forum so far no luck yet. I tried the fnSetFilteringEnterPress of jQuery DataTables: Delay search until 3 characters been typed OR a button clicked but so far can't make it work, any suggestion. Any advise would be appreciate. Thanks
var oTable;
var ws_GetData = 'Default.aspx/GetList';
$(document).ready(function () {
oTable = $('#tbl1').dataTable({
"bJQueryUI": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bProcessing": true,
"bFilter": true,
"bServerSide": true,
"aoColumns": [{ "sWidth": "5%", "bSortable": false },
{ "sWidth": "3%", "bSortable": false },
{ "sWidth": "5%", "bSortable": false },
{ "bSortable": false }, { "bSortable": false },
{ "bSortable": false }, { "bSortable": false },
{ "sWidth": "5%", "bSortable": false },
{ "sWidth": "2%", "bSortable": false}],
"sAjaxSource": ws_GetData,
"fnServerData": function (sSource, aoData, fnCallback, oSettings) {
var page = Math.ceil(oSettings._iDisplayStart / oSettings._iDisplayLength) + 1;
aoData.push({ "name": "pageNo_1", "value": page });
ResultData(sSource, aoData, fnCallback);
}
}).columnFilter({ //sPlaceHolder: "head:before",
aoColumns: [{ "sWidth": "5%", type: "text" },
{ "sWidth": "3%", type: "select", values: ['00', '02'] },
{ "sWidth": "5%", type: "text" },
{ type: "date-range" },
{ type: "text" },
{ type: "text" },
{ type: "number-range" },
{ "sWidth": "5%", type: "text"}]
});
});
function ResultData(sSource, aoData, fnCallback) {
$.ajax({
type: "GET",
url: sSource,
contentType: "application/json; charset=utf-8",
dataType: "json",
data: aoData,
async: true,
beforeSend: function () {
// SHOW the overlay:
$('#overlay').show();
},
complete: function () {
// HIDE the overlay:
$('#overlay').hide();
},
success: function (result) {
var myObject = JSON.parse(result.d);
fnCallback(myObject);
},
error: function (errMsg) {
alert(errMsg);
}
});
}

Maybe this plugin might be of some help or give you an idea on how to continue:
Filter on Return
Add it to your script like this:
$(function() {
$.fn.dataTableExt.oApi.fnFilterOnReturn = function(oSettings) {
var _that = this;
this.each(function(i) {
$.fn.dataTableExt.iApiIndex = i;
var $this = this;
var anControl = $('input', _that.fnSettings().aanFeatures.f);
anControl.unbind('keyup').bind('keypress', function(e) {
//here's the part that you might need to modify:
if (e.which == 13) {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
}
});
return this;
});
return this;
};
$('#datatable').DataTable({
"oLanguage": {
"sSearch": "Filter Data"
},
"iDisplayLength": -1,
"sPaginationType": "full_numbers"
}).fnFilterOnReturn();
});
Working example in this Plunker