I have a select combobox to show/hide a div where there's a DataTable. The problem is that when the div is shown the DataTable header and body are not aligned. The DataTable get populated from database using php.
UPDATE
If the div is not hidden when the page is loaded, the datatable loads
aligned. It gets misaligned when it is hidden and is show by using the
select combobox.
Code:
<table id="dtBasicExample" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
<thead>
<tr>
<th>Código<i class="fa fa-sort"></i></th>
<th>Producto<i class="fa fa-sort"></i></th>
<th>% Exo.<i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
<script>
$(document).ready(function(){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
$.noConflict(true);
//cambiar idioma de Tabla
$('#dtBasicExample').DataTable({
"scrollX": true,
"order": [[1, "asc"]],
"language":{
"lengthMenu": "Mostrar _MENU_ registros por pagina",
"info": "Mostrando pagina _PAGE_ de _PAGES_",
"infoEmpty": "No hay registros disponibles",
"infoFiltered": "(filtrada de _MAX_ registros)",
"loadingRecords": "Cargando...",
"processing": "Procesando...",
"search": "Buscar:",
"zeroRecords": "No se encontraron registros coincidentes",
"paginate": {
"next": "Siguiente",
"previous": "Anterior"
},
}
});
$('.dataTables_length').addClass('bs-select');
});
</script>
Output
Related
I'm implementing asp.net core 3.1 project and have a script like the following and I now in the URL, I'm reading a json file from a an address but I downloaded the json file and put it into my project (wwwroot_>JS files) and I want the URL to read from that file. But I don't know how to specify the address of my json file which is lying in src="~/js/Persian.json" in my project.
<script language="JavaScript" type="text/javascript" src="~/js/datatables.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#myDummyTable").DataTable({
//"searching": false,
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Persian.json"
}
});
});
</script>
you can use global config for datatable like:
$.extend($.fn.dataTable.defaults, {
responsive: true,
... other global configs
language: {
"url": "/Js/Persian.json"
}
}
its work in .net core mvc, also you can translate default lang:
$.extend($.fn.dataTable.defaults, {
language:
{
"sEmptyTable": "موردی برای نمایش یافت نشد",
"sInfo": "نمایش _START_ تا _END_ از مجموع _TOTAL_ مورد",
"sInfoEmpty": "موردی برای نمایش در دسترس نمی باشد",
"sInfoFiltered": "(فیلتر شده از مجموع _MAX_ مورد)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "تعداد در صفحه _MENU_ ",
"sLoadingRecords": "درحال بارگذاری...",
"sProcessing": "درحال پردازش...",
"sSearch": "جستجو : ",
"sZeroRecords": "موردی یافت نشد",
"oPaginate": {
"sFirst": "ابتدا",
"sPrevious": "<i class='mdi mdi-chevron-right'>",
"sNext": "<i class='mdi mdi-chevron-left'>",
"sLast": "انتها"
},
"oAria": {
"sSortAscending": ": مرتب سازی به صورت صعودی",
"sSortDescending": ": مرتب سازی به صورت نزولی"
}
}
});
I just finished my local testing. Inside my Scripts directory I included the Spanish.json file.
And I just called it this way
"language": { "url": "/Scripts/Spanish.json" }
Notice that removed the ~ character that you included in your example.
And here's the result:
If that doesn't work you can specify manually the values in your jQuery DataTable's options, like this:
$('#example').dataTable( {
"language": {
"sProcessing": "درحال پردازش...",
"sLengthMenu": "نمایش محتویات _MENU_",
"sZeroRecords": "موردی یافت نشد",
"sInfo": "نمایش _START_ تا _END_ از مجموع _TOTAL_ مورد",
"sInfoEmpty": "تهی",
"sInfoFiltered": "(فیلتر شده از مجموع _MAX_ مورد)",
"sInfoPostFix": "",
"sSearch": "جستجو:",
"sUrl": "",
"oPaginate": {
"sFirst": "ابتدا",
"sPrevious": "قبلی",
"sNext": "بعدی",
"sLast": "انتها"
}
}
} );
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
</tbody>
</table>
ngAfterViewInit() {
this.listarPromocoes()
$('#datatables').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
responsive: true,
language: {
search: "_INPUT_",
searchPlaceholder: "Search records",
}
});
const table = $('#datatables').DataTable();
<div class="material-datatables">
<table id="datatables" class="table table-no-bordered " cellspacing="0" width="100%" style="width:100%">
<thead>
<tr>
<th>Nome da promoção</th>
<th>Data de ínicio</th>
<th>Data de término</th>
<th>Notificações</th>
<th>Cliques</th>
<th>Visualizações</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let promocao of promocoes">
<td>{{promocao.titulo}}</td>
<td>{{promocao.dataInicio}}</td>
<td>{{promocao.dataTermino}}</td>
<td>{{promocao.notificacoes}}</td>
<td>{{promocao.cliques}}</td>
<td>{{promocao.visualizacoes}}</td>
<td class="text-right">
<i style="cursor: pointer;" (click)="alterarPromocao(promocao.guidpromocao)" class="material-icons">edit</i>
</td>
</tr>
</tbody>
</table>
</div>
Even when the data is loaded the message of "zero data" keep in the screen. I don't know if the problem is how I load the data in the table or if I need to set some configuration in the table options
I have this html table:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered" id="resourcesActivitysTable">
<thead>
<tr>
<th>Order</th>
<th>Priority</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>SomeString</td>
<td>1</td>
<td>28.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>3</td>
<td>20.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>1</td>
<td>27.09.2018</td>
</tr>
</tbody>
</table>
This is my Datatable Configuration:
$('#resourcesActivitysTable').dataTable({
//"order": [[ 1, 'asc' ]],
"aaSorting": [[1, "asc"]],
"iDisplayLength": 10,
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
"language": {
"sEmptyTable": "Keine Daten in der Tabelle vorhanden",
"sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen",
"sInfoEmpty": "0 bis 0 von 0 Einträgen",
"sInfoFiltered": "(gefiltert von _MAX_ Einträgen)",
"sInfoPostFix": "",
"sInfoThousands": ".",
"sLengthMenu": "_MENU_ Einträge anzeigen",
"sLoadingRecords": "Wird geladen...",
"sProcessing": "Bitte warten...",
"sSearch": "Suchen",
"sZeroRecords": "Keine Einträge vorhanden.",
"oPaginate": {
"sFirst": "Erste",
"sPrevious": "Zurück",
"sNext": "Nächste",
"sLast": "Letzte"
},
"oAria": {
"sSortAscending": ": aktivieren, um Spalte aufsteigend zu sortieren",
"sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
}
},
"fnDrawCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var table = $('#resourcesActivitysTable').DataTable()
table.rows().every(function (rowIdx, tableLoop, rowLoop) {
var data = this.data();
// getOrderStatus(data.orderID);
});
}
});
The Datatable sort the Data by the second column (Priority).
My problem is, if the Priority is the same, the table should be sorted by the Date column.
This is my wish result:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-bordered" id="resourcesActivitysTable">
<thead>
<tr>
<th>Order</th>
<th>Priority</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>SomeString</td>
<td>1</td>
<td>27.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>1</td>
<td>28.09.2018</td>
</tr>
<tr>
<td>SomeString</td>
<td>3</td>
<td>20.09.2018</td>
</tr>
</tbody>
</table>
Anyone here an idea how i can sort the Table Data by Date if the priority is the same?
We can able to do sorting with multiple columns in datatable. Please check below code,
"order": [[ 0, 'desc' ],[ 1, 'asc' ]]
In the above, 0 indicates the first column in a table. 1 indicates the second column.
I am trying to add edit and delete button in data table.
I have html
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>Action</th>
</tr>
</tfoot>
</table>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>"
});
});
I tried adding column in thead and tbody but it is giving me alert saying
DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4
Server returning data
{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon"],["Garrett","Winters"],["Ashton","Cox"],["Cedric","Kelly"],["Airi","Satou"],["Brielle","Williamson"],["Herrod","Chandler"],["Rhona","Davidson"],["Colleen","Hurst"],["Sonya","Frost"],["Jena","Gaines"],["Quinn","Flynn"],["Charde","Marshall"],["Haley","Kennedy"],["Tatyana","Fitzpatrick"],["Michael","Silva"],["Paul","Byrd"],["Gloria","Little"],["Bradley","Greer"],["Dai","Rios"],["Jenette","Caldwell"],["Yuri","Berry"],["Caesar","Vance"],["Doris","Wilder"],["Angelica","Ramos"],["Gavin","Joyce"],["Jennifer","Chang"],["Brenden","Wagner"],["Fiona","Green"],["Shou","Itou"],["Michelle","House"],["Suki","Burks"],["Prescott","Bartlett"],["Gavin","Cortez"],["Martena","Mccray"],["Unity","Butler"],["Howard","Hatfield"],["Hope","Fuentes"],["Vivian","Harrell"],["Timothy","Mooney"],["Jackson","Bradshaw"],["Olivia","Liang"],["Bruno","Nash"],["Sakura","Yamamoto"],["Thor","Walton"],["Finn","Camacho"],["Serge","Baldwin"],["Zenaida","Frank"],["Zorita","Serrano"],["Jennifer","Acosta"],["Cara","Stevens"],["Hermione","Butler"],["Lael","Greer"],["Jonas","Alexander"],["Shad","Decker"],["Michael","Bruce"],["Donna","Snider"]]}
Can anyone help me solve this issue
You just need to add its HTML in your DataTable definition
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres' ); ?>",
"columns": [
{
"targets": -1,
"data": null,
"orderable": false,
"defaultContent": [
"<i class='glyphicon glyphicon-edit'></i>"+
"<i class='glyphicon glyphicon-trash'></i>"]
}
]
} );
DEMO : https://jsfiddle.net/Prakash_Thete/evfchh7q/
Change your table definition as below(Added one more header as you are sending data for two columns + edit button column).
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Theater name</th>
<th>One more header</th>
<th>Action</th>
</tr>
</tfoot>
</table>
I am new to jquery and I have used the jqueryData Table, I am facing problem in during search,
Search is working for first two columns (ex., if I search using 'QE5855' or 3453457 its working fine),
But its not searching for the third column (ex., if I enter 'United' or 'united states' table is not getting sorted) , Please help me.
<table id="agentDetails">
<tr style="">
<th width="22%">User Id</th>
<th width="20%">Parent Id</th>
<th width="35%">Country</th>
</tr>
<%
for(UserDataModel getEachEmpDetails:phoneIdSiteMappingList){
%>
<tr>
<td> <div><%=getEachEmpDetails.getUserUid %> </div> </td> // data is like 'QE5855'
<td><div><%=getEachEmpDetails.getParentUid %> </div> </td> //data is like '3453457'
<td><div><%=getEachEmpDetails.getCountry %> </div> </td>// data is like 'United States'
</tr>
<%
}
<%
<script type="text/javascript">
$( document ).ready(function() {
var table = $("#agentDetails").DataTable({
"bSort": false,
"iDisplayLength": 10 ,
"sPaginationType": "full_numbers",
"bSearchable":true,
"bPaginate": true,
"bFilter": true,
"sDom": '<"top"fip>',
"bStateSave": false,
"oLanguage": {
"sInfo": "Showing _START_ to _END_ of _TOTAL_ messages",
"sInfoEmpty": "Showing 0 to 0 of 0 messages",
"sEmptyTable": " ",
"sSearch": "   ",
"oPaginate": {
"sPrevious": "<",
"sNext": ">",
"sFirst":"",
"sLast":""
},
dom: 'T<"clear">lfrtip',
tableTools: {
"sRowSelect": "single"
}
}
});
});
<script>
I'm not sure which version of Datatable are you using but I hope this helps. I should to say that I didn't test it, so the example is just the main idea where I think the problem is.
On your JS code you can indicate the source from you want to retrieve the data on the table, in this case I'm using C# so I use "Url.Action". You should to indicate that in sAjaxSource. Example is something like this...
var oTable;
$(function() {
oTable = $('#agentDetails')
.dataTable({
"bServerSide": true,
"bProcessing": true,
"bSort": true,
"sAjaxSource": "#Url.Action("Method")",
"sPaginationType": "full_numbers",
"bSearchable":true,
"bFilter": true,
"sDom": '<"top"fip>',
"bInfo": true,
"bLengthChange": false,
"aoColumns": [
{ "mData": "UserId" },
{ "mData": "ParentId", "width": "22%", "bSortable": true},
{ "mData": "Country", "width": "35%" },
],
});
On aoColumns "mData" means the way than you al mapping the date that are you getting of your method so you should exactly the name of the var that contains that value in your model. After that you don't need to use a for clause and the datatable should to be able to handled the searching and filter for it self.
Example
<table id="agentDetails" >
<thead>
<tr>
<th>User Id</th>
<th>Parent Id</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>