I am using mRender to add checkboxes in the first column of the tbody... the correct css styling is being applied, but they are not stylized when I view the table. I can only assume this is because I am using mRender to add these values in, however, if I do other css like changing color of text it works fine. I have no problem with the checkbox in the thead being properly styled, but this is included by default with the html. Ideas?
the html:
<table class="table table-striped table-bordered table-hover" id="sample_1">
<thead>
<tr>
<th><input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes" /></th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</tbody>
</table>
the js:
$('#sample_1').dataTable({
//start my code
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/assets/data-tables/test-normal.php",
//end my code
"aLengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
"aoColumnDefs": [ {
"aTargets": [ 0 ],
"bSortable": false,
"mRender": function ( data, type, full ) {
return '<input type="checkbox" class="checkboxes" value="'+data+'" />';
}
} ],
// set the initial value
"iDisplayLength": 5,
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
});
Had to use :
"fnInitComplete": function() {
$(".checkboxes").uniform();
}
You missed the mData portion
In aoColumns, not aoColumnDefs, use the following
{ "mData": null , // can use null, the numeric array number, or assoc array string
"mRender" : function ( data, type, full ) {
return '<input type="checkbox" class="checkboxes" value="'+data+'" />'}
},
Related
I've been struggling with this code. I need to avoid specific columns from being exported. I have done that but I don't know how to export the text inside any input element.
Here is the code:
$("#campaignMaterialsTable table").DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
className: 'export-button',
text: 'Export as Excel',
columns: ':not(.notexport)',
//exportOptions: {
// format: {
// body: function (data, row, column, node) {
// //
// //check if type is input using jquery
// return $(data).is("input") ?
// $(data).val() :
// data;
// },
// columns: ':not(.notexport)'
// }
//},
title: 'Campaign Materials'
}]
});
I don't know here to put the code at the right place.. while initializing..
I referred to this links, but still not getting what I want:
https://datatables.net/forums/discussion/50724/export-values-typed-in-input-box-excelhtml5
https://datatables.net/forums/discussion/42205/export-data-with-text-box-in-td-of-data-table#latest
https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html
https://datatables.net/forums/discussion/50724/export-values-typed-in-input-box-excelhtml5
I assume you have a DataTable containing one or more input fields, something like this:
The user can type values into the input fields.
You want to export data to Excel, so that the result looks like this:
Here we can see the user-provided data as well as the standard table data.
To achieve this, I used the following table data:
<table id="example" class="display nowrap dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Adélaïde Nixon</td>
<td>System Architect</td>
<td><input type="text" id="office" name="office"></td>
<td>432434</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>John Smith</td>
<td>Maager</td>
<td><input type="text" id="office" name="office"></td>
<td>6123</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>John Smith 2</td>
<td>Director</td>
<td><input type="text" id="office" name="office"></td>
<td>6123</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
And I used the following DataTable initialization code:
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
format: {
body: function ( inner, rowidx, colidx, node ) {
if ($(node).children("input").length > 0) {
return $(node).children("input").first().val();
} else {
return inner;
}
}
}
}
}
]
});
});
</script>
The body function assumes that, for input fields, there is only an input field in the cell (i.e. the input field is not contained in a form or any other element).
It uses the node parameter to check for input data, to avoid data formatting issues that could occur (e.g. with dates). I recommend doing that rather than using $(data).is("input").
If there is no input field found in the cell, then the cell contents (inner) are returned.
If the structure of your table does not match these assumptions, then you may need to adjust the above code, of course.
Edit
Regarding the follow-up question about choosing which columns to export, there are various ways.
You can hard-code the column indexes you want to export (where index 0 means the first column). For example:
exportOptions: {
columns: [ 0, 1, 2, 3, 5 ],
format: {
body: function ( inner, rowidx, colidx, node ) {
if ($(node).children("input").length > 0) {
return $(node).children("input").first().val();
} else {
return inner;
}
}
}
}
This exports all columns apart from the Start Date column (index 4).
Or you can use the approach in your question, based on a class, I believe. I have not actually tried that one.
Take note of where the columns: [ 0, 1, 2, 3, 5 ] directive is placed - it is inside the exportOptions section.
you can use
exportOptions:{
columns: ':visible'
}
in below buttons
buttons: [
{
extend: 'pdf',
footer: true,
exportOptions: {
columns: ':visible'
}
},
it will export only visible columns
I want to output this JSON data to a table.
I do not know how to put the contents of "fields" into the same Tr tag.
{
"page": [
{
"type": "Type A",
"fields": [
{
"type": "Type1",
"code": "field1",
"size": {
"width": "200",
"height":"50"
}
},
{
"type": "Type2",
"code": "field2",
"size": {
"width": "250",
"height":"50"
}
}
]
},
{
"type": "Type B",
"fields": [
//....
]
}
],
"revision": "1"
}
I wrote this html
<table>
<thead>
<tr>
<th>Parent-Type</th>
<th>Child-Type</th>
<th>code</th>
<th>width</th>
<th>height</th>
</tr>
</thead>
<tbody id="my-tbody" v-cloak>
<tr v-for="(item, i) in rowData">
<td>
{{item.type}}
</td>
<td v-for="(field, j) in Object.keys(item.fields)">
{{field.code}}
</td>
</tr>
</tbody>
</table>
<scprit>
(() =>{
new Vue({
el: "#my-tbody",
data: {
rowData: []
},
created() {
let _self = this
getLayout().then(function (resp) {
_self.rowData = resp.page;
});
}
});
})();
</script>
I want to create a tr tag for each "page" ,and a td tag for each "fields".
Is it better to format in single-tiered JSON and set it in data?
Thanks.
Try something like this:
<table>
<thead>
<tr>
<th>Parent-Type</th>
<th>Child-Type</th>
<th>code</th>
<th>width</th>
<th>height</th>
</tr>
</thead>
<tbody id="my-tbody" v-cloak>
<tr v-for="item in rowData" :key="item.type">
<td>
{{item.type}}
</td>
<td v-for="field in item.fields" :key="field.code">
{{field.code}}
</td>
</tr>
</tbody>
</table>
Regards
I am using Datatables API but am not able to add multiple buttons in one row.
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button>'
}]
});
Try this code
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button>'
+ '<button class="btn-delete" type="button">Delete</button>'
}]
});
Or
var table = $('#table_invdata').DataTable({
"columnDefs": [{
"targets": -1,
"data": null,
"defaultContent":
'<button class="btn-view" type="button">EDIT</button> <button class="btn-delete" type="button">Delete</button>'
}]
});
Update :
You can use datatable render function to update the column values.
<table class="table" id="datatable" >
<thead>
<tr>
<th>Name </th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Jquery Datatable Code :
$('#datatable').DataTable ({
"data" : FinalResult,
"columns" : [
{ "data" : Name},
{ "data" : null,render: function ( data, type, row ) {
return '<button class="btn-view" type="button">EDIT</button>';
} },
{ "data" : null,render: function ( data, type, row ) {
return '<button class="btn-delete" type="button">Delete</button>';
} }
]
});
Fiddel Link : https://jsfiddle.net/jijomonkmgm/j6madey4/
<table id="table_invdata" class="table table-striped table-bordered">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>Email-id</th>
<th>Salary</th>
<th>Position</th>
<th></th>
</tr>
</table>
This is a very common question, I'm aware. But I spent almost a day because I can't spot the error I have to post this. Can anyone see a mistake?
Markup :-
<table class="table align-items-center table-flush py-3" id="inquiry-select-table">
<thead class="thead-light">
<tr>
<th scope="col" style="display:none">ID</th>
<th scope="col" style="display:none">Version</th>
<th scope="col" style="display:none">Created Date</th>
<th scope="col" style="display:none">Created Time</th>
<th scope="col" style="display:none">Updated Date</th>
<th scope="col" style="display:none">Updated Time</th>
<th scope="col" style="display:none">Client ID</th>
<th scope="col">Client Name</th>
<th scope="col">Knowledge Source</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
JS :-
var inquirySelectTable;
var inquirySelectTableColumns = [{
data: "id"
},
{
data: "version"
},
{
data: "createdDate"
},
{
data: "createdTime"
},
{
data: "updatedDate"
},
{
data: "updatedTime"
},
{
data: "clientId"
},
{
data: "clientName",
defaultContent: "",
className: "all"
},
{
data: "knowledgeSource",
defaultContent: "",
className: "all",
render: function (data, type, row) {
switch (data) {
case 'WOM':
return 'Word of mouth';
case 'PAPER':
return 'Paper Article';
case 'FB':
return 'Facebook';
case 'GOOGLE':
return 'Google Ad';
case 'EMAIL':
return 'Email';
case 'SMS':
return 'SMS';
default:
return 'Other'
}
}
},
{
data: "description",
defaultContent: "",
className: "all"
}
];
var inquiryColumnDefs = [{
"targets": [0, 1, 2, 3, 4, 5, 6],
"visible": false,
"searchable": false
}];
var tableSizeFromFive = [
[5, 10, 15, 25 - 1],
[5, 10, 15, 25, "All"]
];
$(document).ready(function () {
inquirySelectTable = $('#inquiry-select-table').DataTable({
pagingType: "numbers",
responsive: true,
lengthMenu: tableSizeFromFive,
columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,
});
$.get("inquiries/getAllInquiries", function (data, status) {
console.log(data);
setGridData(inquirySelectTable, data);
});
});
function setGridData(table, data) {
table.clear();
table.rows.add(data).draw();
if (table.data().count() > 0) {
$(".table-responsive").removeClass("disabled");
} else {
$(".table-responsive").addClass("disabled");
}
}
The data received from the server :-
The error I'm getting is :-
According to https://datatables.net/manual/tech-notes/4, since I'm getting an Integer as the parameter it means the column count does not match with the row count. But it seems ok to me. Does anyone see something I missed?
Seems like you've swapped columnDefs and columns:
columnDefs: inquirySelectTableColumns,
columns: inquiryColumnDefs,
Interchange them and it'll work fine:
columnDefs: inquiryColumnDefs,
columns: inquirySelectTableColumns,
Example fork:
http://jsfiddle.net/bsf69o04/
Trying to turn off sorting for specific columns in my table, but the wrong columns are affected? Can anyone see what I am missing here?
HTML
<table id="tableListing" class="table table-striped table-hover">
<thead>
<tr>
<th class="no-sort"></th>
<th>Personnumer</th>
<th>Namn</th>
<th>Skapad</th>
<th class="no-sort"></th>
</tr>
</thead>
<tbody>
<tr>
<td>radera</td>
<td>630214-0410</td>
<td>DEAD3, Test</td>
<td>2017-07-18 19:07:12</td>
<td><a href='member_details.aspx?id=85'>info</a></td>
</tr>
<tr>
<td>radera</td>
<td>650301-4257</td>
<td>Doe, John</td>
<td>2017-07-31 22:14:50</td>
<td><a href='member_details.aspx?id=86'>info</a></td>
</tr>
</tbody>
</table>
JS
$("#tableListing").DataTable({
"lengthMenu": [[50, 100, 150, 200, 250, -1], [50, 100, 150, 200, 250, "All"]],
"iDisplayLength": 100,
"order": [],
"columnDefs": [{
"targets": 'no-sort',
"orderable": false
}]
});
Much appreciated!
EDIT: Added image of how it turns out. As you can see, the wrong columns are affected.
If you want to deactivate sorting for specific columns only, you can do it like this:
$('#tableListing').DataTable({
columnDefs: [
{ "orderable": false, "targets": [ 0, 4 ] }
]
});
Or you can add a class like "no-sort" to the column header where you want to suppress sorting.
<thead>
<tr>
<th class="no-sort"></th>
<th>Personnumer</th>
<th>Namn</th>
<th>Skapad</th>
<th class="no-sort"></th>
</tr>
</thead>
And then use that in the DataTable definition:
$('#tableListing').DataTable({
columnDefs: [
{ "orderable": false, "targets": 'no-sort' }
]
});
You can also use as for specific columns as
$(document).ready(function() {
oTable = jQuery('#tableListing').dataTable( {
"bDestroy": true,
"bAutoWidth": true,
"bFilter": true,
"bSort": true,
"aaSorting": [[0]],
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": false }
]
} );
})
You can exclude the column where you do not want sorting as set bSortable to false.
Well,In the new version 1.10 of jQuery DataTables you must use ordering option to disable ordering on the entire table:
$('#tableListing').DataTable({
"ordering": false
});