https://editor.datatables.net/plug-ins/field-type/editor.autoComplete
I have this working fine with inline editing, but no autocomplete window is showing if I use the main modal editor. The autocomplete is making its ajax calls correctly, just the results window isn't showing. Is this a known issue or am I missing something?
Hi,
I use my own color scheme so I need to css the datatable also. Since I use multiple instances of datatables, I want to set it for all in one js file.
Therefore I created a [name]-defaults.js with the code:
$.extend( $.fn.dataTable.defaults, {
responsive: true,
// other settings...
language: {
....
language settings
......
}
} );
but could not find a way to use buttons className: 'my-customs-class'
Sugestions?
I come across a question. When I applied {stateSave: true} in the example page Individual column searching (text inputs). I find the sorting and searching at the top is all OK. If I input something at the top search box, after reload the page, the input character is still there in the box and the search result is OK. But if I input character at the table foot individual search box, after reload the page, the search result is still there but there is nothing in the individual search box.
I hope after reload the page, the input character can still show in the individual search box. Is there anyway to do this?
I have sucessfully achieved my row first row should not sort and remain on top , however my sorting in acsending and desending is not happening properly. I now this question is asked before also but I am unable to achieve it. Request you to please help me.
```
//var oTable;
var onTopValues = new Array("Weightages");
alert(onTopValues);
/* disable asc sorting for specific rows */
$.fn.dataTableExt.oSort["custom-asc"] = function(x,y) {
if( isOnTop(x) ){
return -1; // keep this row at top
}
//if (isOnTop(y)) return 1; // keep this row at top
if( isOnTop(y) ){
return 1; // keep this row at top
}
if((x < y)){
return -1;
}else if((x > y)){
return 1;
}else{
return 0;
}
// return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};
$.fn.dataTableExt.oSort['custom-desc'] = function(x,y) {
if( isOnTop(x) ){
return -1; // keep this row at top
}
//if (isOnTop(y)) return 1; // keep this row at top
if( isOnTop(y) ){
return 1; // keep this row at top
}
if((x < y)){
return 1;
}else if((x > y)){
return -1;
}else{
return 0;
}
};
function isOnTop(s) {
// search for on top values
for (var i = 0; i < onTopValues.length; i++) {
if (s === onTopValues[i]) {
return true;
}
}
return false;
}
$.fn.dataTableExt.afnSortData['custom-ontop'] = function ( oSettings, iColumn )
{
console.log(iColumn);
var aData = [];
$('td:eq('+iColumn+')', _fnGetTrNodes1(oSettings)).each(function(){
if(isOnTop($(this).closest('tr').find('td:eq(0)').text())){
aData.push($(this).closest('tr').find('td:eq(0)').text());
}else{
aData.push($(this).text());
}
});
if(aData==null || aData==''){
$(_fnGetTrNodes1(oSettings)).each(function(){
if(isOnTop($(this).closest('tr').find('td:eq(0)').text())){
aData.push($(this).closest('tr').find('td:eq(0)').text());
}else{
aData.push($(this).text());
}
});
}
console.log(aData);
return aData;
};
function _fnGetTrNodes1 ( oSettings )
{
//alert("3 method to click on sort");
var aNodes = [];
var aoData = oSettings.aoData;
console.log(aoData);
console.log(aoData.length);
for ( var i=0, iLen=aoData.length ; i<iLen ; i++ )
{
if ( aoData[i].nTr !== null )
{
aNodes.push( aoData[i].nTr );
}
}
return aNodes;
}
$(document).ready(function() {
var typeName ='';
/* Apply custom classes to table headers */
$.fn.dataTableExt.oStdClasses.sSortAsc = "custom_asc";
$.fn.dataTableExt.oStdClasses.sSortDesc = "custom_desc";
var oTable = $('#table_id1').dataTable({
"iDisplayLength": 100,
"lengthMenu": [ 100, 250, 500, 750, 1000 ],
"order": [[ 1, "asc" ]],
"aoColumnDefs": [ { aTargets: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14], sType: "custom"}] ,
"aoColumns": [
null,
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
{ "sSortDataType": "custom-ontop" , "bSortable": true},
],
//"aaSorting": [],
initComplete: function () {
this.api().columns(0).every( function (index) {
var column = this;
var select = $('<select id="filterSelect"></select>')
.appendTo( $('#type').empty() )
.on( 'change', function () {
var val = $(this).val();
typeName = $(this).val();
//console.log(val);
fnShowHide( typeName );
column.search( val ? '^'+val+'$' : '', true, false ).draw();
} );
column.data().unique().sort().each( function ( d, j ) {
if(d == 'Consistent Performers - Debt funds'){
select.append( '<option selected value="'+d+'">'+d+'</option>' )
column.search( d ? '^'+d+'$' : '', true, false ).draw();
fnShowHide(d);
}else{
select.append( '<option value="'+d+'">'+d+'</option>' )
}
} );
} );
}
});
$('#type').change(function() {
oTable.fnDraw();
});
});
public function getDataStokSelect()
{
if ($_REQUEST) {
$requestData= $_REQUEST;
$columns = array(
// datatable column index => database column name
0 =>'a',
1 =>'b',
2=> 'c',
3=> 'd',
4=> 'e',
5=> 'f',
);
$id=$requestData['columns']['id']['data']; // **If i can send it i can not catch it on the server side~~~~**
$where= " `b` LIKE '".$id."%' ";
$json=$this->fastDataTable($requestData,'views_stokTable',$columns,false,false);
echo json_encode($json);
}
}
function createLBTable(dataWay,columns,id="",tableName='data-table') {
table = $('#'+tableName).DataTable({
"processing": true,
"serverSide": true,
"ajax":{
url :base_url+dataWay,
type: "POST" ,
data:{'id':id}, //## I can not send an id here !!!!
error: function(){
$(".data-table-error").html("");
$("#data-table").append('<tbody class="data-table-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#data-table_processing").css("display","none");
}
},
"language": turkish,
"columns":columns,
"columnDefs": [
{
"className":'none',
"targets": 0
}]
});
}
Normally I can get this feature on the server side.But I can not catch processing, serverSide when is true. How do I catch the id I send on php. Thank you for your time.
public function getDataStokSelect()
{
if ($_REQUEST) {
$requestData= $_REQUEST;
$columns = array(
// datatable column index => database column name
0 =>'a',
1 =>'b',
2=> 'c',
3=> 'd',
4=> 'e',
5=> 'f',
);
$id=$requestData['columns']['id']['data']; // **If i can send it i can not catch it on the server side~~~~**
$where= " `b` LIKE '".$id."%' ";
$json=$this->fastDataTable($requestData,'views_stokTable',$columns,false,false);
echo json_encode($json);
}
}
function createLBTable(dataWay,columns,id="",tableName='data-table') {
table = $('#'+tableName).DataTable({
"processing": true,
"serverSide": true,
"ajax":{
url :base_url+dataWay,
type: "POST" ,
data:{'id':id}, //## I can not send an id here !!!!
error: function(){
$(".data-table-error").html("");
$("#data-table").append('<tbody class="data-table-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#data-table_processing").css("display","none");
}
},
"language": turkish,
"columns":columns,
"columnDefs": [
{
"className":'none',
"targets": 0
}]
});
}
Normally I can get this feature on the server side.But I can not catch processing, serverSide when is true. How do I catch the id I send on php. Thank you for your time.
I am using vb.net 2013 to get data output , but i am getting the following error while execute the html.
"Invalid Json Response" .
Kindly advice.
I have a table with editor and I want that an only row can be selected for editing or row, so the CTRL or SHIFT keys don't allow to select more than one only row.
Is this possible?
Thanks a lot everyone.
I have a DataTables object which draws a table and the left column includes an icon to deploy a row with extra info, just like in the example in https://datatables.net/examples/api/row_details.html and if Iuse the editor, a row is selected anywhere in the row I click. I'd like to make the left column (the one with the plus icon) not to select or deselect the row when clicked. This way, the row would be selected or deselected just if I click in any column but the left one.
The way I defined columns is like this:
"columns" : [
{
"className": 'celda_de_descripcion',
"orderable": false,
"data": null,
"defaultContent": '<div class="text-center fa fa-plus-circle" style="width:100%; color: #3dc728;"></div>'
},
{"data": 'nombre'},
{"data": 'apellidos'},
{"data": 'fecha_incorporacion'},
{"data": 'salario_bruto_anual', className: "text-right"}
],
"order": [[1, "asc"]],
Is this possible? Can I make a column be clicked without selecting its row?
Thanks a lot everyone.
Hey guys,
i have a dataTable with the responsive extension and i have problems with long strings on the 2nd site (with pagination).
The responsive extension works pretty fine if the long string is on first site
watch the following fiddle: https://jsfiddle.net/zukii/m47qw2ss/3/
but if the long string is on 2nd site, the responsive extension gets problems and goes bigger then the container (the width is too large)!
watch the following fiddle: https://jsfiddle.net/zukii/m47qw2ss/2/
is there any solution for this problem?
When the _prepare method (for the mysql driver) is called with an invalid query, an error will be thrown before the query is added to the debug log. It would be better to call debugInfo at the start of this method, so that debugging also works for invalid queries.
I need some help. I have been successful in uploading images and they are being stored on to my server. But the trouble is when I look in my database the file name is incorrect. Not sure why that it is.
According to my database the incorrect file name is "editor-fileName". But according to my saving feature of this line of code...
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )
This gives the correct file name on my server. But storing it into the database with this line of code is incorrect...
->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )
->db( 'Table', 'ID', array(
'Field' => $pathToImg . Upload::DB_FILE_NAME
) )
But according to the documentation: https://editor.datatables.net/manual/php/upload#Database-information
It says that "Upload::DB_FILE_NAME File name (with extension)"
But it's not doing what I want it to. How do I tell it the File Name is what I saved it to? How do I do that?
When using server side processing, for every column a name value is sent. What is the purpose of this field? From what I can find, Editor.php does not use this value.
Looks like the false string does not work!
I try to make it Dynamik:
$go=array("datum","<","NOW()",false);
$editor->where( $go[0], $go[2],$go[1],$go[3] );
in log i see:
WHERE datum < :where_0
but the NOW() have no effect!
I log with
file_put_contents( '/tmp/editor_sql', $sql."\n", FILE_APPEND );
in Database/Driver/Mysql/Query.php in end of function _prepare
I also tried:
$editor->where( function ( $q ) {
$q->where( $go[0], $go[2],$go[1],$go[3] );
} );
but shure- there is no var in the function - Error: Undefined variable: go in /.....
when i try:
$editor->where( function ( $q ) {
$q->where( 'datum', 'NOW()', '<', false );
} );
it works!
$editor->where( 'datum', 'NOW()', '<', false );
does not work also??
Any Idea?
Thanks Thomas
I'm using fixed columns. However after all data has been rendered, the column that's fixed has a height that's different than the height of the rest of the columns. I tried to add tblObj.columns.adjust().draw(false) where tblObj is my data table object
Trying to do serverside processing with Wordpress. I have the ajax action working but can't get pagination to work properly. Everything is still loading all at once.
https://gist.github.com/ddemuth/4e483c2ef9e4f49c6bb4140e3070cce6
`add_action('wp_ajax_get_registrations_for_export', 'get_registrations_for_export');
add_action('wp_ajax_nopriv_get_registrations_for_export', 'get_registrations_for_export');
function get_registrations_for_export() {
// echo '
<
pre>';print_r($_GET);exit;
$post_statuses = array('unpaid', 'publish', 'cancelled');
$args = array(
'post_type' => 'fka_registrations',
'post_status' => $post_statuses,
'posts_per_page' => 25,
'no_found_rows' => true,
'fields' => 'ids'
);
$argsCount = array(
'post_type' => 'fka_registrations',
'post_status' => $post_statuses,
'posts_per_page' => -1,
'no_found_rows' => true,
'fields' => 'ids'
);
$registrations_to_export = get_posts( $args);
$registrations_count = get_posts( $argsCount);
$total_registrations = count($registrations_count);
//echo '<pre>';print_r($total_registrations);exit;
$registrations = array();
foreach ($registrations_to_export as $key => $registration_id) {
$class_activity = get_field('activity', $registration_id);
$activity_name = $class_activity->post_title;
$activity_id = $class_activity->ID;
$school_obj = get_field('school', $registration_id);
if ($school_obj) {
$school_name = $school_obj->post_title;
$school_id = $school_obj->ID;
}
$session_obj = get_field('session', $registration_id);
$session_name = $session_obj->name;
$session_id = $session_obj->term_id;
$product_info = get_page_by_title($school_name .' '. $activity_name, OBJECT, 'product');
if ($product_info) {
$fka_product_id = $product_info->ID;
}
$location = get_field('location_to_meet_coach', $fka_product_id);
$class_day = get_field('class_day', $fka_product_id);
$class_start_time = get_field('class_start_time', $fka_product_id);
$class_end_time = get_field('class_end_time', $fka_product_id);
$class_sessions = get_field('sessions', $fka_product_id);
$name = get_the_title($registration_id);
$array_key = fka_search_array($session_id, $class_sessions, $name);
// echo '<pre>';print_r($array_key);exit;
if ($array_key || $array_key == '0') {
$session_start_date = $class_sessions[$array_key]['session_start_date'];
$session_start_date = new DateTime($session_start_date);
$session_end_date = $class_sessions[$array_key]['session_end_date'];
$session_end_date = new DateTime($session_end_date);
}
$reg_post_status = get_post_status( $post);
if ($reg_post_status == 'publish') {
$reg_post_status = 'Paid';
}
$registrations[] = array(
$name,
$activity_name,
$school_name,
$class_day,
$class_start_time .' - '. $class_end_time,
$session_name,
$location,
'Test',
'English',
'hmmm',
'English',
'Dave',
'Demuth',
'Class',
'Test',
'English',
'Dave',
'Demuth',
'Class',
'Test',
'English'
);
}
$output['draw'] = 1;
$output['recordsTotal'] = $total_registrations;
$output['recordsFiltered'] = $total_registrations;
$output['data'] = $registrations;
wp_send_json($output);
}`
I want to display a loading gif instead of the default text "Processing" for processing.
This is what I did to achieve the same :
"language": {
"processing": "<img src='~/Content/images/loadingNew.gif' />"
},
But it didn't work. is it because of the way I'm referring to the image source?
Here's my JS for Datatable :
$(document).ready(function () {
$('#searchResult').DataTable(
{
"dom": '<"top"lB>rt<"bottom"ip>', // DataTable element position
"buttons": [
{
text: '<span class="glyphicon glyphicon-refresh" data-toggle="tooltip" title="Refresh Search Table"/>',
action: function (e, dt, node, config) {
ReloadData();
}
},
{
text: '<span class="fa fa-file-excel-o" data-toggle="tooltip" title="Export To Excel"/>',
action: function (e, dt, node, config) {
ExportRequests();
}
},
'colvis'],
initComplete: function () {
$('.buttons-colvis').html('<span class="glyphicon glyphicon-cog" data-toggle="tooltip" title="Column Visibility"/>') // Adds icon to the Column Visibility Button
},
"lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]], // page length options
"pageLength": 25, // default page length
"pagingType": "full_numbers", // pagination related buttons
"ordering": true,
"order": [[0, "desc"]],
"scrollX": true, // enables horizontal scrolling
"filter": true,
"responsive": true,
"serverSide": true,
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"language": {
"infoFiltered":"",
"processing": "<img src='~/Content/images/loadingNew.gif' />"
},
processing: true,
"fnPreDrawCallback": function () {
debugger;
},
"fnDrawCallback": function () {
debugger;
},
"ajax":
{
"url": Helper.baseUrl() + "Search/LoadData",
"type": "POST",
"datatype": "json",
"data": function (d) {
d.searchParams = searchFilters();
},
},
"columns":
[
{
"data": "RequestNo",
} //and so on
],
});
Am I missing anything?
Can I, or how would I, create a selection form where the user can choose from multiple criteria to narrow down what data is delivered in the DataTable? My hope was to use a variety of checkboxes, and dropdowns with pre-filled data (eg, cities, status, zip codes etc.). The users have a good idea of what data they want, and this would be a very helpful capability.Thanks!
Hello,
I am completely new to this forum and to developing plug-ins, so please go easy on me.
I have followed the 'Sliding child rows' tutorial here and have used this functionality in my own web pages. But it occurred to me that I could create a plug-in to do some of the work for me.
Below is what I have come up with so far. Before I go any further with it (if indeed I do, depending on feedback), I though I'd open it up to the forum for discussion.
(function($) {
var ToggleRow = function ( dt ) {
this.toggle = function( dtRow ) {
// if row already showing, close it.
if (dtRow.child.isShown()) {
this.closeRow( dtRow );
}
else {
showRowData( dtRow );
}
};
// code borrowed from the resource at: https://datatables.net/blog/2014-10-02
this.closeRow = function ( dtRow ) {
var showingRow = $(dtRow.node());
$('div.slider', dtRow.child()).slideUp(function () {
dtRow.child.remove();
showingRow.removeClass('shown');
$(dt.table().node()).trigger('rowClosed', [dtRow]);
});
};
var showRow = this.showRow = function ( dtRow, data ) {
var selectedRow = $(dtRow.node());
dtRow.child(data).show();
$('div.slider', dtRow.child()).slideDown(function () {
selectedRow.addClass('shown');
$(dt.table().node()).trigger('rowShown', [dtRow]);
});
};
// relies on data attributes being present for the row being toggled
var showRowData = function ( dtRow ) {
var row = $(dtRow.node());
var requestType = row.data('request-type') || "GET";
var requestUrl = row.data('request-url');
var requestData = row.data('request-data') || null;
var contentType = row.data('content-type') || "application/json; charset=utf-8";
var dataType = row.data('data-type') || "json";
var callback = row.data('callback');
$.ajax({
type: requestType,
url: requestUrl,
data: requestData,
contentType: contentType,
dataType: dataType,
success: function ( response ) {
var data = response;
if (callback) {
var fn = window[callback];
if (fn) data = fn(response);
}
showRow( dtRow, data );
},
error: function (response) { showRow( dtRow, response ); }
});
};
};
$.fn.dataTable.ToggleRow = ToggleRow;
$.fn.DataTable.ToggleRow = ToggleRow;
}(jQuery));
Thanks in advance to anyone who cares to comment on this endeavour