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
Related
Jquery Datatable
I have tried like this
"pageLength": 5,
"pagingType": "full_numbers",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
And I am getting result like
FirstPrevious12NextLast
but I want result something like this
$(document).ready(function() {
$('#example').DataTable({
"pagingType": "full_numbers",
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
"pageLength": 1,
ajax: "https://raw.githubusercontent.com/bmehler/employees/main/personal",
"columns": [{
"data": "id"
},
{
"data": "name"
},
{
"data": "job"
},
]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-bordered table-striped" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Job</th>
</tr>
</tfoot>
</table>
I think the css file is missing: https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css
I have a datatables element on my page with a hidden first column, and an empty column at the end to contain a button.
I'm trying to get the click event of that button to:
Hide the button,
Show a 'loading' icon - fontawesome icon already in the column
Retrieve the value of the hidden columns corresponding row
Show a success/fail icon - to be added but will be a fontawesome icon
CSHTML:
<div class="row">
<div class="col-sm-12">
<table class="table table-striped table-hover" id="SignOffTable">
<thead>
<tr>
<th>DATA_ID</th>
<th>KPI Name</th>
<th>Value 1</th>
<th>Value 2</th>
<th>Value 3</th>
<th>Date For</th>
<th>Value Type</th>
<th>Added By</th>
<th>Added On</th>
<th>Action</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Items)
{
<tr>
<td>
#item.DATAID
</td>
<td>
#item.KPIHead
</td>
<td>
#item.Value1
</td>
<td>
#item.Value2
</td>
<td>
#item.Value3
</td>
<td>
#item.FromDate.ToString("dd/MM/yyyy")
</td>
<td>
#item.Type
</td>
<td>
#item.AddedBy
</td>
<td>
#item.AddedOn.ToString("dd/MM/yyyy")
</td>
<td id="ActionCol">
<button id="TableSignOff" class="btn btn-outline-success btn-sm" data-interaction="#item.DATAID">Sign Off</button>
<div id="Loader"><span id="Loading" class="fa fa-spinner fa-pulse fa-fw"></span></div>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
Script:
<script>
$(document).ready(function () {
$("div#Loader").hide();
var table = $('#SignOffTable').DataTable({
paging: true,
searching: false,
ordering: false,
pagingType: "simple_numbers",
lengthChange: false,
bfilter: true,
info: true,
"columnDefs": [
{ "visible": false, "targets": 0 }
]
});
});
$("#SignOffTable button").click(function () {
$(this).hide();
$('div#Loader').show();
var trElem = $(this).closest("tr");
var firstTd = $(trElem).children("td")[0];
alert($(firstTd).text())
})
</script>
However I can't seem to access the hidden column's data, or successfully hide the button/show the loading spinner. The spinner icon is hidden upon page load, and the button click will hide that button but will then show all the spinners in the column, rather than just that specific one.
You are creating duplicate IDs for your elements. This is invalid HTML and will cause your code to be confused about which elements it's trying to access.
Something more like this should help, using classes rather than IDs:
<td>
<button class="TableSignOff btn btn-outline-success btn-sm" data-interaction="#item.DATAID">Sign Off</button>
<div class="Loader" hidden>
<span class="fa fa-spinner fa-pulse fa-fw" ></span>
</div>
</td>
And
<script>
$(document).ready(function () {
var table = $('#SignOffTable').DataTable({
paging: true,
searching: false,
ordering: false,
pagingType: "simple_numbers",
lengthChange: false,
bfilter: true,
info: true,
"columnDefs": [
{ "visible": false, "targets": 0 }
]
});
});
$("#SignOffTable .TableSignOff").click(function () {
var btn = $(this);
btn.hide(); //hide the button
btn.parent().find(".Loader").show(); //show the loader within the button's parent td
alert(btn.data("interaction")); //output the DATAID
})
Also note that the loaders are hidden at the start by markup rather than code, so you don't get any momentary showing of the loaders before the code runs.
I am following this Datatbles tutorial to sort the third column of my table as percent value:
// Setup column search - add a text input to each footer cell
$('#p_table-id tfoot th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
// DataTable
var table = $('#p_table-id').DataTable({
"columnDefs": [{
"type": "num-fmt",
"targets": 2
}],
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]
],
"buttons": [],
paging: false,
fixedHeader: true
});
// Apply the search
table.columns().every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
});
tfoot {
display: table-header-group;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.13/af-2.1.3/b-1.2.4/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/ju-1.11.4/jq-2.2.4/dt-1.10.13/af-2.1.3/b-1.2.4/datatables.min.js"></script>
<img id="loader" src="/static/img/loader_animation_large.gif" style="
width:36px;
height:36px;
display: none;
position:absolute;
top:50%;
left:50%;
margin-top:-18px;
margin-left:-18px;" />
<p>Logout | Home</p>
<div id="title">
<b style="font-size:200%" ;>Optimize proxies<br></b>
</div>
<div id="proxy_history_dialog" title="Proxy history" style="display:none;">
</div>
<table id='p_table-id' class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Site name</th>
<th>Site id</th>
<th>Extraction rate</th>
<th>Proxy</th>
<th>Proxy duration</th>
<th>Proxy history</th>
</tr>
</tfoot>
<tbody>
<tr>
<td><span>target.com</span></td>
<td><span>-106</span></td>
<td><span>67.8%</span></td>
<td><span>shader_us</span></td>
<td><span>219 days</span></td>
<td>
<button id="-106" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>walmart.com</span></td>
<td><span>-105</span></td>
<td><span>86.6%</span></td>
<td><span>trusted proxies</span></td>
<td><span>433 days</span></td>
<td>
<button id="-105" class="get-proxy-history">history</button>
</td>
</tr>
<tr>
<td><span>bestonix</span></td>
<td><span>-104</span></td>
<td><span>93.3%</span></td>
<td><span>shader_us</span></td>
<td><span>226 days</span></td>
<td>
<button id="-104" class="get-proxy-history">history</button>
</td>
</tr>
</tbody>
</table>
I tried to replace columnDefs with aoColumnDefs and to associate the columndef as in second example in the link above. Still, the sorting functionality for this column is not responding. What am I missing out here?
Change "num-fmt" to "html-num-fmt". It should work now.
var table = $('#p_table-id').DataTable({
"columnDefs": [
{"type": "html-num-fmt", "targets": 2}
],
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});
Since the percentage sign is at the end the sorting should work normally without any extra format definition. I remove the column defs and the sorting works. Here is the plunk you can try on https://plnkr.co/edit/E5CtRwqxVBSqjQTOdc3B?p=preview
var table = $('#p_table-id').DataTable({
dom: 'l Brtip',
"aLengthMenu": [
[20, 50, 100, -1],
[20, 50, 100, "All"]],
"buttons": [],
paging: false,
fixedHeader: true
});
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>
Please solve my problem. I want to show descending order. By default it is ascending order.
Please check my code-
datTable.js
JS-
<script href="http://myshowcam.com/TestSite/assets/data-tables/jquery.dataTables.js"></script>
<script>
$('#dataTable').dataTable({
"sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}]
});
</script>
HTML-
<table class="table table-striped border-top" id="dataTable">
<thead>
<tr>
<th class="hidden-phone"> #ID </th>
<th class="hidden-phone"> Username </th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>chinu</td>
</tr>
<tr>
<td>3</td>
<td>Debakanta</td>
</tr>
<tr>
<td>8</td>
<td>Sanjib</td>
</tr>
</tbody>
</table>
Above code by default i am getting asc record in the first column.
I want to customize above code. Need desc
You'll have to add an order property to your table configuration. Your version of datatables doesn't support the order property. I'd recommend updating to the latest version of datatables if you can.
$('#dataTable').dataTable({
order: [
[0, 'desc']
]
});
Here is the fiddle. (note: I had to comment out the paginate property, uncomment it in your code)
$('#example').DataTable( {
"aaSorting": [[ 0, "desc" ]] // Sort by first column descending
} );
http://live.datatables.net/pacirato/1/edit