I am using DataTables, but I am getting wrong sorting by number column.
it is showing like this.
It should show 1, 2, 3, 4, 5, 6 ....
How I can achieve this. Here is what I tried.
$('#RecTable').DataTable({
//"aaSorting": [[ 1, "asc"]], /*row count starts from 0 in datatables*/
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "sType": "numeric", "aTargets": [1] }]
});
Can anyone help me on this please.
Related
I am using https://github.com/Mottie/Keyboard to enter inputs in the Handsontable. I call keyboard on 'afterSelectionEnd' on text editor element which has class 'handsontableInput' and it appears just below cell.
When I have single table on page, it works perfectly.
But when there are multiple tables on page, result is different. Here are Steps to reproduce the problem
function keyboard()
{
$('.handsontableInput').keyboard
({
layout: 'custom',
customLayout: {
'default' : [
'a s d f g h j k',
'a s d f g h j k',
'a s d f g h j k'
],
},
})
.getkeyboard().reveal();
}
$(document).ready(function () {
function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"], ["2008", 10, 11, 12, 13], ["2009", 20, 11, 14, 13], ["2010", 30, 15, 12, 13]];
}
var container1 = document.getElementById('example1');
var container2 = document.getElementById('example2');
var hot1 = Handsontable(container1, {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}],
afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},
});
var hot2 = Handsontable(container2, {
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true,
comments: true,
cell: [{
row: 1,
col: 1,
comment: "Test comment"
}, {
row: 2,
col: 2,
comment: "Sample"
}],
afterSelectionEnd : function (instance,col,row,td){
this.getActiveEditor().beginEditing();
keyboard();
},
});
})
Please refer jsfiddle http://jsfiddle.net/yd0fucct/5/ to reproduce problem.
I have also posted Issue on Handsontable Github page
Click on the cell of first table, keyboard appears below cell which is good
Click on the cell of second table. Result : keyboard appears in left top of page
Again click in the same cell of second table. Result : Keyboard appears just below cell which is good
Expected behavior : When user clicks on cell of second table first time ( step 2 ), it should appear immediately below it.
Please guide to solve this problem.
When we click the second table first the issue does not occur. It happens only when we click the above table first.
Refer this GitHub issue for solution
var lastInput;
function keyboard() {
var kb,
$input = $(':focus');
if ($input.length) {
lastInput = $input;
// close the last keyboard
kb = lastInput.getkeyboard();
if (kb) {
kb.close(true);
}
if (!$input.hasClass('.ui-keyboard-input')) {
$input.keyboard({
usePreview: false,
initialFocus: false,
layout: 'num'
});
}
$input.getkeyboard().reveal();
}
}
I am using DataTables 1.10.11 version.
I have a requirement. I have almost 1000 data list. From that list I need to order on two columns by default and then need to show only first 10 rows.
Please help me to achieve this requirement.
You can try like this:
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate": true,
"sPaginationType": 'full_numbers',
"iDisplayLength": 10,
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}]
} );
} );
Finally I am able to implement this requirement.
$('#id').DataTable({
dom : 't',
"processing" : true,
"deferRender" : true,
"data" : data,
"columns" : getColConfg(),
"language" : {
"emptyTable" : "No data available"
},
"pageLength" : 10
"order" : [ [ 2, "desc" ], [1, "desc"] ]
});
dom : 't',
Adding dom as 't' only served my requirement.
I want to use export excel and print the datatable .I use following code but not able to use both options for selected columns.
$('#example').DataTable( {
dom: 'Blfrtip',
buttons: [
{
extend: 'excel','print',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
}
],
"lengthMenu": [[200, 250, 500, -1], [200, 250, 500, "All"]],
"bLengthChange" : true,
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value="">Select</option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
I am not figure out what happens wrong.Please help me.
{
extend: 'excel'
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
{
extend: 'print'
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
}
One of the most commonly used is the columns option which defines the columns that should be used as part of the export. This is given as a column-selector, making it simple to tell it if you want only visible columns, or a mix of the columns available.
and this is a simple of how it can be done :
function attachDataTable(tableId: string) {
let companyFunctionTable = $('#' + tableId).DataTable({
dom: 'Bfrtip',
buttons: [
//'csvHtml5'
{
extend: 'csvHtml5',
exportOptions: {
columns: [0, 1, 2]
},
className: 'btn btn-sm btn-outline-secondary',
text: `<i class="fa fa-file-csv"></i> ${i18next.t('Export to CSV')}`, titleAttr: i18next.t('Export to CSV'),
bom: true
},
],
"initComplete": function (settings, json) {
placeToolbarButton(tableId);
},
"paging": globalVar.dataTablesSettings.paging,
"stateSave": false,
"stateSaveParams": function (settings, data: any) {
data.search.search = "";
},
"order": [],
"lengthChange": false,
"pageLength": globalVar.dataTablesSettings.pageLength,
"language": {
"url": globalVar.dataTablesSettings.languageUrl
}
});
}
Please fellow that link :
https://datatables.net/extensions/buttons/examples/html5/columns.html
Don't forget to include the required JS libraries needed to display the exporting functionality.
Just modify your buttons option this way
buttons: [
{
extend: 'excel',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
},
{
extend: 'print',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ]
},
},
]
elaborated #tdymicroit answer
I just want to ask how can I add DATA ID on the buttons EDIT/DELETE here is my javascript for rendering datatable rows
I wanted to put Data ID on ROW_ID like for example delete?id=1 (CI: delete/1)
$('#data').dataTable({
"sScrollY": "400px",
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": "<?php echo base_url(); ?>pages/datatable",
"iDisplayLength": 10,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [[0, 'asc']],
"aoColumns": [ null, null, null,
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete',
}
]
}).fnSetFilteringDelay(700);
Assuming you're returning the ID value in your ajax, you can use mRender
...
"sClass": "center",
"mRender": function ( data, type, full ) {
return 'Edit / Delete';
}
full[0] is the data row with the ID parameter. If this is in a different column, obviously you'll to change the index accordingly
I need to add the some filter data(from the conditions) into the jquery data table. How its possible?
$('#table_items').dataTable({
"aaSorting": [[ 5, "desc" ]],
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
'#table_items' - the id of your table
"aaSorting": [[ 5, "desc" ]] - here 5 is the number of column for default sorting
All columns will be sortable automatically