I want to create a dynamic system for Datatables.
I have this code where I attribute to all elements with the class "my-datatable" the DataTable main options. Next I want to add options for a specific Datatable.
$(".my-datatable").DataTable({
responsive: true,
dom: 'Bfrtip',
buttons: [
'csv',
'excel',
'pdf',
],
"language": {
"search": "",
"searchPlaceholder": "Search for any client’s information…",
"emptyTable": "No data available in table",
"info": "",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing": "Processing...",
"zeroRecords": "No matching records found",
},
});
$(".my-datatable#specific-datatable").DataTable({
"order": [[ 1, "asc" ]],
columnDefs: [
{ targets: [0,2,4,5,7], orderable: false },
],
"columns": [
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "15%" },
{ "width": "20%" },
]
});
$.extend can be applied in this case. After declaring the option of the first table, extend specific table property by the option using $.extend as following
var originalTableOption = {
responsive: true,
dom: 'Bfrtip',
buttons: [
'csv',
'excel',
'pdf',
],
"language": {
"search": "",
"searchPlaceholder": "Search for any client’s information…",
"emptyTable": "No data available in table",
"info": "",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing": "Processing...",
"zeroRecords": "No matching records found",
},
};
$(".my-datatable").DataTable(originalTableOption);
var specificTableOnlyOption = {
"order": [[ 1, "asc" ]],
columnDefs: [
{ targets: [0,2,4,5,7], orderable: false },
],
"columns": [
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "5%" },
{ "width": "20%" },
{ "width": "10%" },
{ "width": "15%" },
{ "width": "20%" },
]
};
var specificTableOption = $.extend(specificTableOnlyOption, originalTableOption);
$(".my-datatable#specific-datatable").DataTable(specificTableOption);
Related
This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 1 year ago.
how i can read specific data from JSON file without element name, i working with datatables, the follow is de code, for example, i need read in javascript file only row value '2021-06-21' and '$8.000', how would can to get these value.
I working with JSON file generated for PHP and datatables
This is my JSON file format example:
{
"draw": 0,
"recordsTotal": null,
"recordsFiltered": null,
"data": [
[
"hola",
"1",
"Product",
"2021-06-21",
"$ 1.091.000\n",
"$ 8.000\n",
"$ 16.000\n",
"$ 1.115.000\n",
"$ 1.949.000\n",
"$ 834.000\n",
"76%",
"988980003697VO"
],
My JS code from datatable
function format ( data ) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+data.[6]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+data.[11]+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function(){
var employeeData = $('#escanmotorList').DataTable({
"lengthChange": true,
"processing":true,
"serverSide":true,
"autoWidth": false,
"order":[],
"ajax":{
url:"action.php",
type:"POST",
data:{action:'listEscanmotor'},
dataType:"json"
},
"language": {
"lengthMenu": "Mostrando _MENU_ productos por página",
"zeroRecords": "Nothing found - sorry",
"info": "Página _PAGE_ de _PAGES_",
"loadingRecords": "Cargando...",
"infoEmpty": "No records available",
"search": "Buscar",
"processing": "Procesando...",
"paginate": {
"first": "Primero",
"last": "Último",
"next": "Siguiente",
"previous": "Anterior"
},
"infoFiltered": "(filtered from _MAX_ total records)"
},
"columns": [
{ "width": "15px", "targets": 1, "className": 'details-control' },
{ "width": "15px", "targets": 1 },
null,
{ "width": "55px", "targets": 1 },
{ "width": "90px", "targets": 1 },
{ "width": "40px", "targets": 1 },
{ "width": "40px", "targets": 1 },
{ "width": "90px", "targets": 1 },
{ "width": "90px", "targets": 1, "orderable": false },
{ "width": "70px", "targets": 1 },
{ "width": "30px", "targets": 1, "orderable": false },
{ "width": "120px", "targets": 1, "orderable": false },
{ "width": "70px", "targets": 1 },
{ "width": "60px", "targets": 1, "orderable": false },
{ "width": "60px", "orderable": false },
{ "width": "60px", "orderable": false }
],
"pageLength": 10
});
$('#escanmotorList tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = employeeData.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.find('svg').attr('data-icon', 'plus-circle'); // FontAwesome 5
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.find('svg').attr('data-icon', 'minus-circle'); // FontAwesome 5
}
} );
You access it not via "name", but via "key". And non-associative arrays has default keys from 0 to "length-1". In your case myJson.data[0][6]
var myJson = {
"draw": 0,
"recordsTotal": null,
"recordsFiltered": null,
"data": [
[
"hola",
"1",
"Product",
"2021-06-21",
"$ 1.091.000\n",
"$ 8.000\n",
"$ 16.000\n",
"$ 1.115.000\n",
"$ 1.949.000\n",
"$ 834.000\n",
"76%",
"988980003697VO"
],
]
};
console.log(
myJson.data[0][6],
myJson.data[0][11],
myJson.data[0][myJson.data[0].length - 1]
);
I have done following code and now iI want to add edit column in Bootstrap Datatable with server side functionality in MVC and Bootstrap. Finally I want proper CRUD operation, so how can I approach for this?
<script type="text/javascript">
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
dt = $('#assets-data-table').DataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": "#Url.Action("Get","Asset")"
},
"columns": [
{ "title": "ID", "data": "ID", "searchable": true },
{ "title": "Name", "data": "Name", "searchable": true },
{ "title": "City", "data": "City", "searchable": true },
{ "title": "EmpCode", "data": "EmpCode", "searchable": true },
{ "title": "DOJ", "data": "DOJ", "searchable": true },
{ "title": "Address", "data": "Address" },
{ "title": "DOB", "data": "DOB" }
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});
}
}
// initialize the datatables
assetListVM.init();
});
</script>
I'm trying to set the width of a cell in a jQuery datatable upon initialization and it never seems to work. I've have tried what the official site recommends and other examples. Below are some of the options I have tried. Please help on what I'm doing wrong?
Ex: 1
$('#dataTables-comments').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"aoColumns": [{
"sWidth": "50%"
},
{
"sWidth": null
},
{
"sWidth": null
},
{
"sWidth": null
},
{
"sWidth": null
}
],
"responsive": true
});
Ex: 2
$('#dataTables-tbl').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columnDefs": [{
"width": "50%",
"targets": 0
}],
"responsive": true
});
Ex: 3
$('#dataTables-tbl').DataTable({
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columns": [{
"width": "50%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}],
"responsive": true
});
As with any other usage of a CSS percentage value, the value must be a percentage of something. If the table itself not have a defined width, then 10% is untranslatable. So give your table a width :
#dataTables-comments {
width: 800px;
}
and be sure to turn off autoWidth so dataTables not begin to overrule the predefined column widths :
$('#dataTables-tbl').DataTable({
autoWidth: false, //<---
"bLengthChange": false,
"bFilter": false,
"iDisplayLength": 5,
"columns": [{
"width": "50%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}],
"responsive": true
});
I want to select entire row of the datatable. With the following code only the 0th(NAME) column from the data is being selected:
I do the following inside a success ajax function
mydtable.DataTable( {
aaData:result.users,
"aaSorting": [[1,'asc']],
"iDisplayLength": 25,
"bPaginate": true,
"sPaginationType": "full_numbers",
"scrollY":"350px",
"scrollCollapse": true,
"order": [ 1, 'asc' ],
"dom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": 'multi',
"sRowSelector": 'td:first-child',
"aButtons": [ 'select_all', 'select_none', ]
},
"aoColumns":
[
{ "data": null, defaultContent: '', orderable: false},
{ "mData": 0 },
{ "mData": 1 },
{ "mData": 2 },
],
});
Have a look at this demo - http://live.datatables.net/kesijisi/1 - is this what you want it to do?
I've got a datatables table working great and now I'd like to add an additional element. The user can move a slider to select a range, click search, and the table returns only those rows with a specific column value within the range.
Here's the script for the filtering:
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('.leftLabel').val(), 10 );
var max = parseInt( $('.rightLabel').val(), 10 );
var score = parseFloat( data[11] ) || 0;
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && score <= max ) ||
( min <= score && isNaN( max ) ) ||
( min <= score && score <= max ) )
{
return true;
}
return false;
}
);
$(document).ready(function() {
$('#slider_search').click(function () {
var table = $('#total_datatable').DataTable();
table.draw();
} );
});
And here's the script to originally draw the table:
$(document).ready(function() {
$("#total_datatable").DataTable({
"serverSide": true,
"ajax": {
"url":"compare_2.php",
"type":"GET"
} ,
"paging": true,
"pageLength": 100,
"order": [[ 10, "asc" ],[11,"desc"],[1,"asc"]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Provider ID" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Hospital Name" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Address","visible":false },
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "City" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "State",},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "ZIP Code"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "County","visible":false },
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "Phone","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Condition"},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure ID"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Measure Name" },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Score",},
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Sample"},
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Footnote","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure Start","visible":false },
{ "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Measure End","visible":false },
{ "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Index","visible":false },
],
"sDom": 'f<"clear">rtip',
});
});
The slider values are populated in here:
<div class="leftLabel" style="display:inline-block;"></div>
<div class="rightLabel" style="display:inline-block;"></div>
What should happen is that after you select the slider values and click the #slider_search button, the table should redraw with the same settings as the original table, but filtered to the specific rows. I've used this range filtering before and my script is based off of this. I tried doing it with input boxes like the Datatables example and it works, but I want it to work based on the slider values and only when the user clicks search (the example updates the table as soon as you input).
So, the question is: What am I doing wrong that's causing this not to work in the manner that I'm looking for?
Any direction would be appreciated.