can we have border lines in rows and columns like excel?
border lines intable
↧
↧
DataTables buttons on wheel click
Hi,
I am using DataTables button as a link to another page, code is shown below. However I cannot find a way to handle wheel click on the button in order to open the same link in new tab because href is set to '#'. It seems like the action is never executed on a wheel click, so e.preventDefault() won't help...
Is there a way to support wheel click?
action : function(e, dt, node, config) {
var processedLink = link;
ref.forEach(function(currentValue, index, array) {
processedLink = processedLink.replace("{" + index + "}", dataTablesSelected(dt, currentValue, button.attr("extend")));
});
window.location = processedLink;
}
↧
Scroll two datatables side by side at the same time
So I am a developer and I was trying to scroll two datatables at the same time but I can't catch the scoll event, someone wanna help me with this issue?
I'll attach a picture with the screen shot of the issue, I wanna scroll these two datatables at the same time and I don't know how
↧
Show static table / datatable in editor form
Hello,
I have a use case where I Want to show some editor form related information (basically a tabular information) in the editor form..
but I am not able to figure out how that can be done..
Ideally the table should be displayed the the right of the form .. but on top is also okay....
any help would be really appreciated..
thanking you in advance..
↧
select an option from a popup window
Hello,
I have an editor form which as a select box and a button adjacent to it....
When I user clicks the button a form with relevent information (basically a list of values) is opened and the user can select any option..
When the user selects any option from the list the list popup should close and corresponding option should be selected in the select box of editor form...
Basically, I want to allow user to be able to check all the option related information in a seperate popup (consisting of a datatable itself) and get the selected option from popup ...
Thanking in advance...
↧
↧
csvhtml5 exportoptions format body
Hello,
Looking to format one of my columns that I am exporting to a csv.
Cannot find a good example
I tried the following ... how do I format column 15 ... i tried just foobar but does not come through
Thanks,
Evan
{extend: 'csvHtml5', text:'CSV', className:'btn-link',
filename: 'my export ' ,
exportOptions: {
columns: [ ':visible' ],
format: {
body: function ( data, row, column, node ) {
return column == 15 ?
'foobar':
data;
}
}
}},
I am using
* https://datatables.net/download/#bs-3.3.7/jq-3.2.1/jszip-2.5.0/pdfmake-0.1.32/dt-1.10.16/e-1.6.5/af-2.2.2/b-1.4.2/b-colvis-1.4.2/b-flash-1.4.2/b-html5-1.4.2/b-print-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/rr-1.2.3/sc-1.4.3/sl-1.2.3
*
* Included libraries:
* Bootstrap 3 3.3.7, jQuery 3 3.2.1, JSZip 2.5.0, pdfmake 0.1.32, DataTables 1.10.16, Editor 1.6.5, AutoFill 2.2.2, Buttons 1.4.2, Column visibility 1.4.2, Flash export 1.4.2, HTML5 export 1.4.2, Print view 1.4.2, ColReorder 1.4.1, FixedColumns 3.2.3, FixedHeader 3.1.3, KeyTable 2.3.2, Responsive 2.2.0, RowGroup 1.0.2, RowReorder 1.2.3, Scroller 1.4.3, Select 1.2.3
↧
Hidden custom form template not showing up
Hello I have a custom editor form template from one of the examples as below
<div id="customForm" style="display:none">
<fieldset class="name">
<legend>Name</legend>
</fieldset>
<fieldset class="office">
<legend>Office</legend>
</fieldset>
<fieldset class="hr">
<legend>HR info</legend>
</fieldset>
</div>
the only thing is by default its hidden
and I am trying to show/hide it as below.. but the template is not showing up.. when I manually do the $(#customForm).show() from developer tools it show up correctly..
editor = new $.fn.dataTable.Editor( {
ajax: base_url + 'api/voucher',
table: "#voucher",
template: "#customForm",
idSrc: 'voucher_id',
fields: [{
label : "Voucher",
name : "voucher_id",
type: "hidden"
},
{
label : "Voucher Type",
name : "voucher_type",
type: "select2",
ipOpts : [
{'label' : 'Credit', 'value' : 'Credit'},
{'label' : 'Debit', 'value' : 'Debit'}
],
opts: {
"placeholder": "Select Voucher Type",
"allowClear": true
}
},
{
label: "Credit Party",
name: "credit_party_id",
type: "select2",
ipOpts: getFirmList('credit_party_id'),
opts: {
"placeholder": "Select Credit Party",
"allowClear": true
}
},
{
label: "Debit Party",
name: "debit_party_id",
type: "select2",
ipOpts: getPartyList('debit_party_id'),
opts: {
"placeholder": "Select Debit Party",
"allowClear": true
}
},
{
label: "Voucher Amount",
name : "voucher_amount"
},
{
label: "Narration",
name: "narration"
},
{
label: "Status",
name: "status",
type: "todo",
def: 1
}
]
});
editor.on('initEdit', function() {
$("#customForm").show();
});
editor.on('postEdit', function() {
$("#customForm").hide();
});
editor.on('initCreate', function() {
$("#customForm").show();
});
editor.on('postCreate', function() {
$("#customForm").hide();
});
Any suggestions would be really appriciated.
↧
Remove Rows Before Table Init
I'm storing some data on the client (localStorage) that contains a list of ids that should be excluded from the table on initialization. I don't have the ids server-side, so this has to happen on the client. I thought this would be simple by using the rowCallback, but I can't seem to figure out how to remove the row if it's in my list of excludes. Here's my best attempt so far. I don't get any errors, just nothing happens and the rows are still there:
rowCallback: function( row, data, index ) {
if ( aScanCult.indexOf(data[1]) > -1 ) row.remove();
}
Surely this can be done before the table builds rather than after it's all ready, right?
↧
Is Bower no longer supported?
Today I saw the news about the 1.5.1 release of the Buttons extension. However, surprisingly in Bower is the latest version is 1.4.2, as in the GitHub repo (https://github.com/DataTables/Dist-DataTables-Buttons)
I'm using the datatables.net-buttons-bs in Bower
Am I missing something here?
Currently, I could not change to the npm version
↧
↧
Button Extensions not showing up
I created a JS fiddle to show this: https://jsfiddle.net/q0ruv6sx/2/
I am instantiating this by the following code:
ThisDataTable = $('#MyTable').DataTable({
data: TableData,
buttons: [
{
extend: 'pdfHtml5',
download: 'open'
},
'print'
],
columns: [
{ title: "Number" },
{ title: "Name" },
{ title: "Start Date" },
{ title: "Customer" },
{ title: "Location" },
{ title: "Sales Person" }
]
});
I have tried without the pdfHtml5 button as well.
I am including all of the recommended JS and CSS from the download tool provided.
↧
Editor returns
Okay, So if I have this straight. The editor needs the altered row data returned to it in the same format as the ajax load for the actual table right?
↧
how to complete checkbox with JSON from PHP?
Hi!!
I make the checkbox adding this code in columnDefs.
{
'targets': 7,
'searchable':false,
'orderable':false,
'className': 'dt-body-center',
'render': function (data, type, full, meta){
return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
}
}
Now I try complete the checkbox with data from PHP in JSON. In console I can see that parametre 'full' contains all de data but I can´t manipulate it. I need to compare what is the value of JSON for mark each checkbox.
Sorry for my english and I waitting for a response 
↧
Requested unknown parameter '0' for row 0, column 0.
I'm using DataTables and Editor and am getting this dialog popup:
"DataTables warning: table id=ImmigrationNotes - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"
And when I click to make it go away, the table shows up with the correct number of records yet, there is no text in any of the fields.
No colspan or rowspan in the tbody. The number of columns are equal in the header and table body and are what's in the HTML.
What more can cause the warning? and Why does the correct number of rows show up but no text in any cell?
↧
↧
Error importing sqlite.sql
Hi there,
I have created a database test.sqlite3 in DB Browser for SQLite, then I tried to import file sqlite.sql that comes with the downloadable package Editor-PHP.1.7.0.zip. I get the following error:
Error importing data: Error in statement #23: not an error. Aborting execution and rolling back.
Do you know what is causing this error or what I should do to fix it? Thanks.
Cheers, Manuel
↧
Child rows (show extra / detailed information) with fixed columns
How can I build row_details ( subtable ) https://datatables.net/examples/api/row_details.html with left and right fixed columns https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
Like this https://jsfiddle.net/bagratzakaryan/bu9o7btL/8/
But in my case, I use server side and get an error with the datatables.js, see under
↧
Datatable Filter not working with ajax call
Hi Team,
I have used datatable with ajax call. it is working perfectly.But when i applied filter on it, it is not filtering the row from the table.
I have define both bFilter and serverSide as a true, still not working.
Help
↧
FooterCallback is doing 3 calls.
Hi guys,
all the best to you and yours.
I am using 2 datatables one is connected to my Invoice table the other to my InvoiceDetails table.
I have a dependency that works when the invoiceDetails quantity or sell fields change. This updates the lineTotalNett & lineTotal cells in the row.
editorInvoiceDetails.dependent( ['inv_list.quantity','inv_list.sellPrice'], function ( val, data ) {
console.log(' editor on dependent ');
//event: 'keyup change'
// need to update all the row total etc and the invoice details
var quant = Number(editorInvoiceDetails.field( 'inv_list.quantity' ).val());
var sell = Number(editorInvoiceDetails.field( 'inv_list.sellPrice' ).val());
var total = quant * sell ;
var vatRate = Number(editorInvoiceDetails.field( 'inv_list.vatRate' ).val());
var lineTotal = total* (vatRate/100) ;
lineTotal = lineTotal + total;
//console.log('total is ' + total);
editorInvoiceDetails.set( 'inv_list.lineTotalNett', (total));
editorInvoiceDetails.set( 'inv_list.lineTotal', (lineTotal));
} , {event: 'keydown'});
So I am using the footerCallback to calculate the sum and populating the Invoice tables as follows
$("#dtInvoiceDetails").DataTable().destroy();
$('#dtInvoiceDetails').empty();
tableInvoiceDetails = $('#dtInvoiceDetails').DataTable( {
"footerCallback": function ( row, data, start, end, display ) {
console.log('Invoice details call back called 3 times');
var api = this.api(), data;
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
var totalNett = api
.column( 8 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
var total = api
.column( 9 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
totalNett = totalNett.toFixed(2);
total = total.toFixed(2);
totalNettVat = total - totalNett;
totalNettVat = totalNettVat.toFixed(2);
// Update footer
console.log(' Total = ' + total);
tableInvoices.cell( currentSelectedInvoiceIndex, 5 ).data( totalNett ).draw();
tableInvoices.cell( currentSelectedInvoiceIndex, 6 ).data( totalNettVat ).draw();
tableInvoices.cell( currentSelectedInvoiceIndex, 7 ).data( total ).draw();
editorInvoices.edit( currentSelectedInvoiceIndex, false ).submit();
//editorInvoiceDetails.edit();
//editorInvoices.create( false ).submit();
On the select event of the invoice table I have the following which calls the getInvoiceDetails and populates the invoiceDetails table.
$('#dtInvoices').on( 'select.dt', function ( e, dt, type, indexes ) {
//console.log(' indexes = ' + indexes);
//alert( 'Row index on select : '+tableInvoices.row( this ).index() );
currentSelectedInvoiceIndex = indexes ;
console.log(' currentSelectedInvoiceIndex = ' + currentSelectedInvoiceIndex);
selectedInvoiceID = tableInvoices.cell('.selected', 0).data();
// if (currentInvoiceID !== selectedInvoiceID )
// {
//selectedInvoiceIndex = tableInvoices.row( this ).index() ;
currentInvoiceID = selectedInvoiceID;
selectedOrderNo = tableInvoices.cell('.selected', 8).data();
selectedInvNettTotal = tableInvoices.cell('.selected', 5).data();
selectedInvVatTotal = tableInvoices.cell('.selected', 6).data();
selectedInvTotal = tableInvoices.cell('.selected', 7).data();
selectedPayType = tableInvoices.cell('.selected', 2).data();
selectedPayDate = tableInvoices.cell('.selected', 4).data();
selectedInvNotes = tableInvoices.cell('.selected', 9).data();
selectedDate = tableInvoices.cell('.selected', 3).data();
selectedDelType = tableInvoices.cell('.selected', 1).data();
getInvoiceDetails();
// }
} );
When I change the value of the quantity or sell the console outputs 'console.log('Invoice details call back called 3 times');' from the footerCallback. Sometimes the amounts are not calculated correctly. ( ie I get 0 in the invoice table.)
So I presume the above is causing a loop of some sort.
I need this to happen.
When clicking on the invoice table get the selected invID and call getInvoiceDetails to populate the invoiceDetails table with the relevant data.
Calculate the sum of the columns and update the invoice table.
When the quantity or sell fields are changed do the same.
Is there another event I can use to get the sums ?????
Cheers
Steve Warby
↧
↧
how to use mergeCells
can anyone tell me please how to use how to use mergeCells , i see it in discussion's on this forum
https://github.com/DataTables/Buttons/blob/533156edef9d49a6c93b2f04a87312f33b31f9dc/js/buttons.html5.js#L1122
↧
Checkboxes not visible in DataTable second time.
Hi,
i am binding the table using callback by using UpdatePanel.
Once my button click code behind runs completely, i call a script on aspx page using Scriptmanager.ClientScriptblock()...
and in the called java script function i append rows to DataTable.
On first load it adds the checkboxes as first column. but in second time they are not visible and will be shown only when i sort the table. Can some please help.
i am appneding rows to tbody as follows
$("#bodyListLetter tr").remove(); // first removing tr and then add.
$('#bodyListLetter').append(Rows);
Table initialisation code.
if ($.fn.dataTable.isDataTable('#example2')) {
table = $('#example2').DataTable();
}
else {
$('#example2').DataTable({
"searching": false,
"retrieve": false,
"paging": false,
"ordering": true,
"info": false,
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
}
↧
maximum call stack size exceeded in export
Hello when i export a small table to excel it works fine
but when i try to export same table but with lots of rows from 20,000 to 60,000 it throws
RangeError: Maximum call stack size exceeded
exception.
↧
