I am pull php data and including inside my table, more specific, inside of the tag tbody, all work well until realize that when I update a line of the table through fnUpdate this don't update just one line but update all table datatable. The question is: how I make it update just this line?
code:
<script type="text/javascript">
$(document).ready(function(){
var table = $('#tabela_produto2');
var tabela = table.dataTable({
"pageLength": 1,
"lengthMenu": [[7, 25, 50, 100, -1], [7, 25, 50, 100, "Todas"]],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [-9] },
{ "width": "7%", "targets": 0 }
],
"oLanguage": {
"sLengthMenu": "Produtos de Locação por Página: _MENU_",
"sInfo": "_TOTAL_ Produtos de Locação",
"sInfoFiltered": "(Total: _MAX_ Produtos de Locação)"
},
"sDom": '<"top"fi>rt<"bottom"lp><"clear">',
"order": [
[0, "asc"]
], // set first column as a default sort by asc,
"bPaginate": true
});
table.on('click', '.atualiza', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0]; // here the row to update
tabela.fnUpdate('test33' , nRow,4,false); // here do update (but it
update all table and not just this line
tabela.fnDraw();
});
//tabela.fnUpdate('test' , 0,0,false ); // Row
//tabela.fnDeleteRow( 0 );['a', 'b', 'c', 'd', 'e','d','4','4','9']
//tabela.fnDraw();
});
</script>
Related
Here is my datatable initialization :
$(document).ready(function () {
var table = $('#dtBasicExample').DataTable({
"stateSave": true,
"responsive": true,
"ordering": true,
"pagingType" : "simple_numbers",
"lengthChange": true,
"fnInitComplete": function () {
var myCustomScrollbar = document.querySelector('#dt-vertical-scroll_wrapper .dataTables_scrollBody');
},
"scrollY": 620,
"scrollX": true,
"scroller": {
"rowHeight": 30
},
"scrollCollapse": true,
"deferRender": true,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"language": {
"zeroRecords" : "No Records were found",
"lengthMenu": "_MENU_"
}
});
table.column( 0 ).visible( false ); // hide first column
table.columns.adjust().draw(); // not working
});
Photo not mine, but this is same as what my table looks like. Table header is not aligned.
I already set the table width="100%", I have tried Table.columns.adjust().draw(), Table.clear().draw() and some css hacks for 'dataTables_scrollHeadInner' and 'dataTables_scrollHead' as mentioned in some posts but neither of them have worked.
Please note that it only happens when the data is loaded for the first time. The width of the table changes when I click pagination button or even F12 to bring up the dev tool console and looks as expected.
Any help will be appreciated.
I'm working on angular project and I'm sorting my data into a datatable, it's initialized in a js file like that :
$(function () {
$('#sorting-table').DataTable({
"language": {
"lengthMenu": "Afficher _MENU_ par page",
"zeroRecords": "Nothing found - sorry",
"info": "Page _PAGE_ de _PAGES_",
"infoEmpty": "Aucun résultat trouvé",
"zeroRecords": "Rien trouvé - Désolé",
"search": "Chercher",
"infoFiltered": "(total: _MAX_ )",
"paginate": {
"previous": "Précédent",
"next": "Suivant"
}
},
"lengthMenu": [
[5, 10, 15, -1],
[5, 10, 15, "Tous"]
],
"order": [
[0, "desc"]
],
dom: 'lBfrtip',
buttons: {
buttons: [{
attr: { id: 'printButton' },
extend: 'print',
text: '<i class="la la-print"></i>',
title: $('h1').text(),
exportOptions: {
columns: [ 0, 1, 2, 3]
},
footer: true,
autoPrint: true,
}],
dom: {
container: {
className: 'dt-buttons'
},
button: {
className: ''
}
}
}
});
});
})(jQuery);
On a component that my table is sorted I want to work with angular ngx-translation, if the current language change I want to change the language of my data table !
ngOnInit() {
this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
if (this.translate.currentLang === 'ar') {
$('#sorting-table').DataTable({
language: {
url: 'cdn.datatables.net/plug-ins/1.10.20/i18n/Arabic.json'
}
});
}
})
}
I got this error :
DataTables warning: table id=sorting-table - Cannot reinitialise
DataTable. For more information about this error, please see
http://datatables.net/tn/3
url should be like this : //cdn.datatables.net/plug-ins/1.10.20
and add destroy:true
i'm using DataTable and now after some work my table has a double datatable info showing as :
Showing 1 to 10 of 385 entries
Showing 1 to 10 of 385 entries
And i don't know how it is happening, in the inspect mode i have :
<div class="dataTables_info" id="tableResult_info" role="status" aria-live="polite">Showing 1 to 10 of 385 entries</div>
<div class="dataTables_info">Showing 1 to 10 of 385 entries</div>
My table is initialized like this :
let matable = $('#tableResult').DataTable({
data: newData,
dom: 'Blfrtipi',
select: true,
responsive:true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
'columnDefs': [
{
'targets':[column],
'createdCell': function (td) {
$(td).attr('class', 'text-center');
}
}
],
buttons: [
'excel',
{
className: 'boutonCacherLogsMessages',
text: 'Cacher logs et messages',
action: function ( e, dt, node, config ) {
cacherMessages();
cacherLogs();
}
}
],
language: {
"lengthMenu": "Afficher _MENU_ résultats",
search: "_INPUT_",
searchPlaceholder: "Rechercher"
},
});
Can i have your help please ?
Ty
EDIT : Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
I am using the jQuery DataTables plugin (https://datatables.net/). I am trying to get the last page to be the first page. I am sorting by date and would like the latest entries to be at the bottom of the visible area.
So if the "Records per page:" is 10, then the latest date should be at the bottom. I am using the plugin to create a "logbook" so the latest entries should always be at the bottom. I have tried the following but I can't get it to work:
jQuery
// On page load: datatable
var table_companies = $('#table_companies').dataTable({
"ajax": "data.php?job=get_companies",
"sDom": '<"top"lB><"clear">rt<"bottom"p><"clear">',
"language": {
"paginate": {
"previous": "Older Entries"
}
},
"autoWidth": false,
"searching": true,
"columns": [
{ "data": "date" },
{ "data": "type", "sClass": "company_name" },
{ "data": "registration" }
],
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [-1] }
],
"lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
"pagingType": "simple",
"oLanguage": {
"sLengthMenu": "Records per page: _MENU_",
"sInfo": "Total of _TOTAL_ records (showing _START_ to _END_)",
"sInfoFiltered": "(filtered from _MAX_ total records)"
}
});
table_companies.fnPageChange( 'last' );
I am using this link to load my plugin:
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11,b-1.1.2,b-colvis-1.1.2,b-print-1.1.2,cr-1.3.1,r-2.0.2/datatables.min.js"></script>
Please check this code:
$('#datatable').DataTable().page('last').draw('page');
It turns out it was as simple as capitalizing the "D" in dataTables.
Changed:
var table_companies = $('#table_companies').dataTable({
to:
var table_companies = $('#table_companies').DataTable({
Is there any possibility to manually delimit the numbers of the displayed rows of a (Data)Table?
Normally we use filtering input, but then the values are fixed; for example: 10, 25, 50, 100, All.
I would like to have a text field where I could insert the number of rows I wish to display; for example: 3, 7, 29, etc and then after clicking a button we would display the "pages" of the table only with the inserted number of rows.
I read some tutorials and did some searches, but was unable to find anything about it.
Here the JavaScript of my table (but I don't think it helps):
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
Any help is welcome!
Straight from datatable forums.
var oTable;
$(document).ready(function() {
$('YourButtonIdorSelector').click( function () {
var newDisplayLength = $("TextFieldIDOrSelectorHere").val();
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = newDisplayLength;
oTable.fnDraw();
});
oTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
});
or
var searchTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
searchTable.fnSettings()._iDisplayLength = $("TextFieldIDOrSelectorHere").val();
searchTable.fnDraw(); //redraw the table
You can simply add the new length you want displayed to the _iDisplayLength property and redraw the table.
When creating the data table, this stuff would go in the complete callback function fnInitComplete
$('#search-table').dataTable({
"fnInitComplete": function(oSettings,json){
var $table = this;
//example of how many rows to show
var newLength = 29;
//add the new value to your datatable object
oSettings._iDisplayLength = newLength;
//redraw the table, you have to do this to see the changes
$table.fnDraw();
},
//the rest of your settings
});