I want to reinitialize the DataTable according to dropdown value changes on the page. if new table column number is equals to former column numbers then everthing is fine. But when the column number is less or more, then it gives me an error.
destroy function doesn't work in this scenario.
If I reload the page with new paramters it is also fine. But i want to solve this problem with ajax call.
Here is an example:https://jsfiddle.net/aaktas/arbcgvhz/24/<script async src="//jsfiddle.net/aaktas/arbcgvhz/27/embed/"></script>
I couldn't find a way inside the DataTable functions. I found a quick solution which is re-creating the html table element like below:
function reCreateTable() {
$('#reportsTable').remove();
$('.table-responsive').prepend('<table id="reportsTable" class="table table-striped" style="width:100%"></table>');
}
If someone can advice any other solution, it would be great.
Related
I'm using datatable in bootstrap4 and I've a pagination table (10 itens per pag).
I made a function to get values in table, but
when I tring to get all rows values, I've one problem because I only get the values show in a screen.
I tryed used in js ,
document.getElementById("myTable).tBodies[0].rows;
and tried Jquery
but always I get only the values in screen.
Has anyone had such a problem?
I used
$('#table').DataTable().data().row() ;
and it works but when I iterate this bring me a values like a "innerHTML" but I have functions in a rows(), so I need get values like a "innerText" because this is a values show in screen.
Thanks guys, I appreciate your help.
I would like to refresh a single cell in ag-grid. Using the gridApi.refreshCells().
This refresh is called by a piece of code that keeps track of the current and previous cell.
So what i would like to do it is to update the previous cell.
I tried the following:
gridApi.refreshCells({columns: [prevColumn], rowNodes: [prevRowNode]});
Note that the prevColumn is of type "Column" and prevRowNode is of type "RowNode"
Calling this works, except that it will refresh an entire column and not just a single cell.
Also refreshing a single row is also not working, which when modifying the above to just use the rowNodes will still update the column.
Thanks you guys!
I'm not sure exactly what you are aiming for. To refresh one cell have you tried gridApi.applyTransaction?
https://www.ag-grid.com/javascript-grid/data-update-transactions/
Specifically the example:
https://www.ag-grid.com/javascript-grid/data-update-transactions/#example-updating-with-transaction
If this isn't what you need, please could you provide a plunker demonstrating the issue?
I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.
I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.
You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts
There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}
here's my question, I've got a datatable in html, I have a function replacing the html code of the datatable by an updated one (the same, but with the update database values).
But the probleme is, things like "Display 1 entry from 1 to 1" doesn't update.
I'd like to refresh the whole tab with the new values, and with the data-table functions from.
Any ideas ?
I'm not really clear about how my code is; but basically : it's a html table ruled by php's foreach/if and echoes of values got by requesting a database. So, even while reloading the same html code, there won't be the same values if you add something through the database.
I'll add the fact that there is switchbuttons inside the data-base, and they get also destroy by the html reload.
When I say html reload, I mean this : $('#myTable').html(new_html);
Thank you
Assign your datatable initialize to variable like below
var table = $('#myTable').DataTable();
Then whenever you call your function for table reload make sure you call this function after it finish to run. It is used by datatable to refresh table.
table.draw();
I have a quite confusing question. I have a Webix datatable and trying to reset a filter (richSelectFilter) for a column. But it's acting not as I've expected. I tried
$$("table1").getFilter("title").config.value = "";
But nothing happens. Another attempt:
$$("table1").getFilter("title").config.value = "";
$$("table1").refreshColumns();
And filter was disappeared while values are still filtered!
Here's a short code snippet: http://webix.com/snippet/b34607aa
Am I doing something wrong? Will appreciate any help.
Try to use
$$("table1").getFilter("title").setValue("");
Here's a snippet http://webix.com/snippet/3eb45109
While you code will be correct for normal richselect control, filters in a datatable store the actual values in the column's config object. So you need to change it there, or just use the setValue API which will change value and will refresh the grid in the necessary way.