I am using YADCF plugin with Datatables and I found a little glitch. I am trying to update a selector, but table_arg.fnDraw inside exFilterColumn function is reseting select filter value.
yadcf.initOnDtXhrComplete(function() {
yadcf.exFilterColumn(oTable, [[4, $("#yadcf-filter--mytable-4 option:eq(1)").val()]], true);
});
Daniel, developer of YADCF who has discovered the bug on Stackoverflow.
You can check on website https://bow.thingiverse.ml
Hello, I have a problem with buttons: ['colvis'].
Html:
| # | CodeOr |
|---|---|
|
1
|
|
|
1
|
Js code:
$(document).ready(function () { $('#testdb').DataTable({ (```) buttons: [ 'colvis' ],(```) stateSave: true, }); });However, the checkbox click events do not work when there are buttons: ['colvis']. Please give me the solution. Thank you!
how get value data to variabel test in php?
{
'data': 'KPNO_TRANSAKSI',
'className': "center",
'render': function (data){
'<?php $test ?>' = data; // i want get value data to variabel test
return '<?php echo $test ?>';
}
}
]
});
How to add 2 or more relationship table
Using Server Side Thanks.
Please Tell me why both search are not same
i create duplicate,edit and remove button like this:
{
data: null,
"orderable": false,
className: "center",
defaultContent: "<button class='btn btn-outline btn-success btn-sm editor_edit' style='border-radius: 40%;margin: auto;display: block'><i class='fas fa-pen' style='margin: 2px -2px 0px -1px;font-size:19px'></i></button>"
},
{
data: null,
className: "center",
"orderable": false,
defaultContent: "<button class='btn btn-outline btn-primary btn-primary btn-sm editor_duplicate' style='border-radius: 40%;margin: auto;display: block'><i class='fas fa-clone' style='margin: 2px -2px 0px -1px;font-size:19px'></i></button>"
},
{
data: null,
className: "center",
"orderable": false,
defaultContent: "<button class='btn btn-outline btn-primary btn-danger btn-sm editor_remove' style='border-radius: 40%;margin: auto;display: block'><i class='fas fa-trash-alt' style='margin: 2px -2px 0px -1px;font-size:19px'></i></button>"
}
now i want to disable field only on edit mode, its work fine in create and edit mode, but in duplicate this disable also the field, how i can make the only on edit mode i will disable field, and all other mode include duplicate not?
how can I implement the dependant() method on a field of type date. In other words I want to change the data that is contained in a select according to the date i selected in the date field. this is all in editor.
Only the last record in my CSV files is imported.
Please let me know if this is a limitation on the trial version or papa parse plugin?
I am using something like this https://jsfiddle.net/an5kbx0z/ to filter my entries by a custom data attribute. Using this with the data attribute added directly in my template works flawlessly. However after changing DataTables to ajax mode and adding the data attribute via columnDefs -> createdCell the filter is no longer working.
How can I filter by data attributes added via columnDefs?
This is the columnDefs section of my script:
columnDefs: [
{
targets: [1],
createdCell: function (td, cellData, rowData, row, col) {
if(cellData === 'Info') {
$(td).attr('data-doctype', 'infoItem')
}
if(cellData === Document') {
$(td).attr('data-doctype', docItem')
}
}
}
]
Hello,
I would like to do : https://datatables.net/examples/api/row_details.html
Parent row : Nom - Adresse - CodePostal - Ville - Pays
Children row : Telephone - Telecopie - SiteInternet - SiteSupport
The data is stored in the table name : 'Para_Editeur'
I work with database SQL Server.
My script 'editeur.js' (Datatable parent):
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Téléphone :</td>'+
'<td>'+d.Telephone+'</td>'+
'</tr>'+
'<tr>'+
'<td>Télécopie :</td>'+
'<td>'+d.Telecopie+'</td>'+
'</tr>'+
'<tr>'+
'<td>Site Internet :</td>'+
'<td>'+d.SiteInternet+'</td>'+
'</tr>'+
'<tr>'+
'<td>Site Support :</td>'+
'<td>'+d.SiteSupport+'</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#table_editeur').DataTable( {
"bProcessing": true,
"serverSide": true,
"ajax":{
url :"./response-displayrow_editeur.php", // json datasource
type: "post", // type of method ,GET/POST/DELETE
error: function(){
$("#table_editeur_processing").css("display","none");
}
},
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": '',
},
{ "data": "Nom" },
{ "data": "Adresse" },
{ "data": "CodePostal" },
{ "data": "Ville" },
{ "data": "Pays" },
{ "data": "Telephone" },
{ "data": "Telecopie" },
{ "data": "SiteInternet" },
{ "data": "SiteSupport" },
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#table_editeur tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
// var tdi = tr.find("i.fa");
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
// tr.find('svg').attr('data-icon', 'plus-circle');
tr.removeClass('shown');
// tdi.first().removeClass('fa-minus-square');
// tdi.first().addClass('fa-plus-square');
}
else {
// Open this row
row.child( format(row.data()) ).show();
// row.child(format(tr.data('ACA'), tr.data('ACA'))).show();
// tr.find('svg').attr('data-icon', 'minus-circle');
tr.addClass('shown');
// tdi.first().removeClass('fa-plus-square');
// tdi.first().addClass('fa-minus-square');
}
} );
} );
My script 'response-displayrow_editeur.php' (Datatable parent):
<?php
//include connection file
include_once(".\db_connection.php");
// getting total number records without any search
$sql = "SELECT dbo.Para_Editeur.Nom,dbo.Para_Editeur.Telephone,dbo.Para_Editeur.Telecopie,dbo.Para_Editeur.SiteInternet,dbo.Para_Editeur.SiteSupport FROM dbo.Para_Editeur";
$stmt = sqlsrv_query( $conn, $sql);
if( $stmt === false ) {
die( print_r( sqlsrv_errors(), true));
}
//iterate on results row and create new index array of data
while( $obj = sqlsrv_fetch_object( $stmt)) {
$data[] = $obj;
}
echo json_encode($json_data); // send data as json format
?>
Thank you for help
I have a table with a large client side data source. I couldn't get the scroller plug in to work properly, and eventually found my sEmpyTable string that contained an h2 tag to be the problem. I am guessing this is a bug related to the fact that all rows need to have the same height to be able to calculate scrolling properly. I can work around this by not having the h2 tag, but maybe this is affecting others as well.
Description: As soon as you start scrolling, content will flicker and/or dissappear.
Demo: https://jsfiddle.net/fc7hmu46/1/
The datatable is showing previous filter when user searches ->clicks edit button on the searched result ->clicks cancel button ->the datatable shown is not the one he searched but previous saved search results is been shown.
Hi.
I replaced function ajax with a datatable.
$(document).ready(function() {
getUserList();
}
function getUserList(){
$.ajax({
url : "userList.json",
success:function(data){
var html = '';
for(key in data){
html += '<tr>';
html += '<td>'+data[key].name+'<td>';
html += '<td>'+data[key].email+'<td>';
html += '<tr>';
}
$("#div").empty();
$("#div").append(html)
}
})
}
I have succeeded in changing the source above as below.
$(document).ready( function () {
var table = $( '#userTable' )
.addClass( 'nowrap' )
.dataTable( {
responsive: true,
ajax: {
'url': 'userList.json’,
'dataSrc': ''
},
columns: [
{'data': 'name'},
{'data': 'email'}
]
} );
} );
But I don't know how to change the data in the source below...
Where should I add something to my data table?
var global_UserOrder = null;
$(document).ready(function() {
global_UserOrder = order;
getUserList();
}
function getUserList(order){
global_UserOrder = order;
$.ajax({
//this
data : {
order : order,
},
//
url : "userList.json",
success:function(data){
var html = '';
for(key in data){
html += '<tr>';
html += '<td>'+data[key].name+'<td>';
html += '<td>'+data[key].email+'<td>';
html += '<tr>';
}
$("#div").empty();
$("#div").append(html)
}
})
}
Thanks. ^--------^
In particular, Django REST framework. I have not problem getting data into the datatable however cannot get the editor buttons to work ("create", "edit", "delete"). At this stage I'm only using the trial editor package to see if suitable, does this have restrictions that prevent these functions?
Hello everyone, can I dynamically change the name of the editor's table option, for example "#example" to "#example" + index after click editor button, before opening the modal?
var editor;
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: "......",
table: "#example",
fields: [ {
label: "First name:",
name: "first_name"
......
]
} );
$('#example').DataTable( {
dom: "Bfrtip",
ajax: "../php/staff.php",
columns: [
........
],
select: true,
buttons: [
** { extend: "edit", editor: editor }**
]
} );
} );
How to reset the filters using a button?
fnFilter('') is not clearing not clearing my search inputs.
var v1=$("#dataEntryFormTable").dataTable();
v1.fnFilter('');
v1.fnDestroy();
Hi,
I'm using footerCallback to add the total amount of selected product, every thing is working fine except getting the total here is my code:
`
footerCallback: function (row, data, start, end, display) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
totalsum = api.column(3)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
$(api.column(3).footer()).html(
'(' + totalsum + ' SAR) '
);
},
`
the odd thing is that when I change the api.column(3) to api.column(2) - which is not the wonted column- it works fine!
For the first time search is done the stateSave is not working ,But from the second time onwards stateSave is working properly.What may be the issue?
var v2=$("#dataEntryFormTable").dataTable();
v2.fnDestroy();
dataEntryFormTable = $("#dataEntryFormTable")
.dataTable(
{
"bProcessing" : false,
"bServerSide" : false,
"sAjaxSource" : "./dataEntryFormList.do?teamId="
+ teamId,
"bJQueryUI" : false,
"iDisplayLength" : 100,
"bStateSave" : true,
At any screen size up to tablet-l I want the table to always display vertically (in child rows), which it currently does. However, adding this class to my html triggers manual mode, and columns will no longer wrap to a child row when they overflow the screen, instead becoming a large horizontal table with a scroll bar.
The table has buttons which will double the amount of data shown if the user wishes, so I need both the table to continue to wrap in child rows at any size up to tablet-l, AND still have the column visibility controlled automatically so that any column that overflows the table will wrap to a child row with no scroll bar.
I appreciate this is a contradiction, but was wondering if it's implementable through the options?
html:
<table id="tableAllBrowseProperties" class="table table-striped table-hover rounded " style="width:100%">
<thead class="bg-primary">
<tr class="">
<th class="min-tablet-l text-center">#</th>
<th class="min-tablet-l js-column-location">Property</th>
<th class="min-tablet-l text-center"><span class="text-nowrap">Net rental</span> yield</th>
<th class="min-tablet-l text-center">Total return</th>
<th class="min-tablet-l text-center">Live price </th>
<th class="min-tablet-l text-center">Valuation</th>
<th class="min-tablet-l text-center"><span class="text-nowrap">Discount (-)</span> <span class="text-nowrap">Premium (+)</span></th>
<th class="min-tablet-l text-center">Fees</th>
<th class="min-tablet-l text-center">Unmatched offers</th>
<th class="min-tablet-l text-center">Your investment</th>
<th class="min-tablet-l text-center">Capitalised cost</th>
<th class="min-tablet-l text-center"><span class="text-nowrap">Net rental</span> income</th>
<th class="min-tablet-l text-center">Growth</th>
<th class="min-tablet-l text-center">Total return</th>
<th class="min-tablet-l text-center">View</th>
</tr>
</thead>
<tbody> </tbody>
</table>
</div>
js:
$(document).ready(function () {
// Setting datatable defaults
$.extend($.fn.dataTable.defaults, {
dom: '<"datatable-scroll"t><"datatable-footer"ip>',
language: {
paginate: {
'first': 'First',
'last': 'Last',
'next': $('html').attr('dir') == 'rtl' ? '←' : '→',
'previous': $('html').attr('dir') == 'rtl' ? '→' : '←',
},
},
'pagination': true,
'info': true,
'searching': true,
"lengthChange": false,
"columnDefs": [{
"targets": ["js-column-reports", "js-column-trade", "js-column-location"],
"searchable": false,
"orderable": false,
}],
"pageLength": 5,
"responsive": true
});
var x = $('#tableAllBrowseProperties').DataTable({
"responsive": {
details: {
type: 'none',
display: $.fn.dataTable.Responsive.display.childRowImmediate,
renderer: function (api, rowIdx, columns) {
var data = $.map(columns, function (col, i) {
return col.hidden ?
'<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
'<td class="w-50"><strong>' + col.title + ':' + '<strong></td> ' +
'<td class="w-50 text-right">' + col.data + '</td>' +
'</tr>' :
'';
}).join('');
return data ?
$('<table class="table table-striped table-bordered w-100"/>').append(data) :
false;
}
}
},
colReorder: true,
dom: 'Bfrtip',
buttons: {
buttons: [
{
extend: 'colvisGroup',
text: 'Show my investments',
show: [9, 10, 11, 12, 13]
},
{
extend: 'colvisGroup',
text: 'Hide my investments',
hide: [9, 10, 11, 12, 13]
}
],
dom: {
button: {
tag: "button",
className: "btn btn-light rounded"
},
buttonLiner: {
tag: null
}
}
},
"searching": false
});
x.columns([9, 10, 11, 12, 13]).visible(false);
x.on('column-visibility.dt', function (e) {
x.columns.adjust().draw();
});
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();
// Get the column API object
var column = x.column($(this).attr('data-column'));
// Toggle the visibility
column.visible(!column.visible());
});
});