I'm trying to do a master-detail with datatable, but the responsive detail table is not working. and the detail is as if it were another row, but what I want is to be a separate table, to be able to do things with it.
This is my code
HTML
<table class="table table-striped table-bordered dt-responsive nowrap table-hover " id="ListaControlCacao" width="100%" aria-describedby="DataTables_Table_0_info" role="grid">
<thead>
<tr role="row">
<th></th>
<th>Puesto de observación</th>
<th>Fecha</th>
<th>Observador</th>
<th>Boton floral</th>
<th>Floracion</th>
<th>Maduracion</th>
<th>Fructificacion</th>
<th>Valoración</th>
<th>Rendimiento</th>
<th>Enfermedades</th>
<th>Plagas</th>
</tr>
</thead>
<tbody></tbody>
</table>
JAVASCRIPT
var ListaControlCacao = $('#ListaControlCacao').DataTable({
"ajax": "/PuestoObservacionCacao/ListaPuestoObservacionCacaoxUsuario",
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
responsive: true,
language: LenguajeDataTable,
"columns": [
{
"Width": 2,
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "PuestoObservacionCacao" },
{ "data": "Fecha" },
{ "data": "Observador" },
{ "data": "BotonFloral" },
{ "data": "Floracion" },
{ "data": "Maduracion" },
{ "data": "Fructificacion" },
{ "data": "Valoracion" },
{ "data": "Rendimiento" },
{ "data": "Enfermedades" },
{ "data": "Plagas" }
]
});
$('#ListaControlCacao tbody').on('click', 'td', function () {
if ($(this).index() == 0) {
return;
}
var tr = $(this).closest('tr');
var row = ListaControlCacao.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format()).show();
tr.addClass('shown');
var xyz = $('#ListaDetalleControlCacao').DataTable({
"bServerSide": true,
"sAjaxSource": "/Cacao/ListarControlCacao3?IdPuestoObservacion=" + row.data().Id,
"bProcessing": true,
"pageLength": 10,
//"lengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
dom: 'rtip',
select: 'single',
rowId: 'Id',
deferRender: true,
"responsive": true,
buttons: [
{
extend: 'colvis',
columns: ':not(:first-child)'
},
'copy',
'csv',
'excel',
'pdf',
'print'
],
language: LenguajeDataTable,
"aoColumns": [
{
"sName": "Id",
"bSearchable": true,
"bSortable": true
},
{ "sName": "Fecha" },
{ "sName": "Observador" },
{
"sName": "BotonFloral",
"sWidth": 2
},
{
"sName": "Floracion",
"sWidth": 2
},
{
"sName": "Maduracion",
"sWidth": 2
},
{
"sName": "Fructificacion",
"sWidth": 2
},
{ "sName": "ValoracionCultivo" },
{ "sName": "RendimientoCultivo" },
{ "sName": "Enfermedades" },
{ "sName": "Plagas" }
]
});
}
});
function format() {
return ' <div class="table-responsive"> <table id="ListaDetalleControlCacao" class="table table-striped table-bordered display responsive dt-responsive nowrap table-hover"><thead><tr><th>No.</th><th>Fecha</th><th>Observador</th><th>Boton Floral</th><th>Floracion</th><th>Maduracion</th><th>Fructificacion</th><th>Valoracion</th><th>Rendimiento</th><th>Enfermedades</th><th>Plagas</th></tr></thead><tbody></tbody></table> </div>';
}
And that's how it looks:
Related
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);
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 am trying to make a table using jquery-datatables with the header shown below:
<table id="tableau" class="display" width="100%" align="center">
<thead>
<tr>
<th colspan="2"></th>
<th colspan="2"></th>
<th rowspan="2"></th>
<th colspan="2"></th>
<th rowspan="2"></th>
</tr>
<tr>
<th colspan="2"></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This works great alone but, when I try it with jquery-datatables it doesn't work at all. Nothing shows up except the table header.
$(document).ready(function() {
var table = $('#tableau').DataTable({
"scrollY": "500px",
"scrollCollapse": true,
"autoWidth": true,
"paging": false,
"processing": false,
"info": false,
"ordering": false,
"searching": false,
"data": [{
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
},
{
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
},
],
"columns": [{
"data": null,
"defaultContent": ''
},
{
"data": "ta"
},
{
"data": null,
"defaultContent": ''
},
{
"data": "tb"
},
{
"data": null,
"defaultContent": ''
},
{
"data": null,
"defaultContent": ''
},
{
"data": "tc"
},
{
"data": null,
"defaultContent": ''
}
],
});
I have found that they have some errors in the amount column header with content. Check this solution:
$(function() {
var dataSet = [{
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
}, {
"ta": "ta",
"tb": "tb",
"tc": "tc",
"td": "td",
"te": "te",
"tf": "tf",
"tg": "tg",
"th": "th"
}, ];
$("#tableau").DataTable({
scrollY: "500px",
scrollCollapse: true,
autoWidth: true,
paging: true,
processing: true,
info: true,
ordering: true,
searching: false,
data: dataSet,
columns: [{
"data": "ta"
}, {
"data": "tb"
}, {
"data": "tc"
}, {
"data": "td"
}, {
"data": "te"
}, {
"data": "tf"
}, {
"data": "tg"
}, {
"data": "th"
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="tableau" class="display" width="100%">
<thead>
<tr>
<td>ta</td>
<td>tb</td>
<td>tc</td>
<td>td</td>
<td>te</td>
<td>tf</td>
<td>tg</td>
<td>th</td>
</tr>
</thead>
</table>
Demo
Hope this helps you.
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?
This probably just needs another pair of eyes as I am missing something simple. Everything was working and I think I did something simple someplace.
$(document).ready(function () {
$('#dblist').on('change', function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
$('#search').click(function () {
var selected = $("select option:selected").text();
tablefill(selected);
});
function tablefill(selected) {
$('#sbar').show();
$('#table_id').dataTable({
"sAjaxSource": '/php/connect/searchtablequery.php',
"bProcessing": true,
"sScrollY": "500px",
"bDeferRender": true,
"bDestroy": true,
"sAjaxDataProp": "",
"fnServerParams": function (aoData) {
aoData.push({ "name": "db", "value": selected });
},
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [1] }
],
"aoColumns": [
{ "mData": "calldate" },
{ "mData": "recordingfile" },
{ "mData": "uniqueid" },
{ "mData": "src" },
{ "mData": "did" },
{ "mData": "lastapp" },
{ "mData": "dst" },
{ "mData": "disposition" },
{ "mData": "duration" },
{ "mData": "userfield" },
{ "mData": "accountcode"}],
"iDisplayLength": 20,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
"aButtons": [
"copy", "csv", "xls", "pdf",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}
]
}
});
}
});
If you see any improvements or useless code do tell me aswell, I am always looking to learn.