Comments (12)
Could you provide me with a full example (a demo app that highlights the issue)?
from simple-datatables.
@mariatamayo. Did you end up with a solution ? I have a similar issue.
I generate the following JSON data serverside.
data = [
{id: 1, name: 'Edward K.', country: 'UK', city: 'London'},
{id: 2, name: 'Henri S', country: 'France', city: 'Lyon'},
{id: 3, name: 'Mike D', country: 'US', city: 'New York City'},
...]
In my js I try to :
const renderFunction = function(data, cell, row){
return data + "<button class=\'test\' type=\'button\' data-row=\'" + row.dataIndex + "\'>Select</button>";
}
this.dataTable = new DataTable(this.results_tableTarget, {columns: [ {select: 1, render: this.renderFunction}, {select: 2, hidden: true}] });
this.dataTable.insert(JSON.parse(this.data.get("results")));
// NB: I use JSON.parse since data sent from server is JSON
}
In the end, column 1 is not rendered as expected (only a class td
tag) and column 2 is not hidden.
from simple-datatables.
Ok, I found a temporary solution. After calling insert
you should call render
on dataTable
From @mariatamayo's example :
https://jsfiddle.net/2xsbeutg/
The problem is that if you set searchable: true
search is rendered twice..
PS: I have not solved the issue related to hidden yet
from simple-datatables.
Please also note that the quick fix above breaks pagination
from simple-datatables.
Hi all,
After reviewing the source code, I realized that insert
/ add
called the update
function to regenerate rows. The problem is that this last function doest not call the setColumns()
from datatable.js
. which is in charge of iterating over columnRenderers and format rows.
When I change the update function as follow the rendering works (not hidden columns)
update() {
classList.remove(this.wrapper, "dataTable-empty")
this.paginate(this)
this.render("page")
this.links = []
let i = this.pages.length
while (i--) {
const num = i + 1
this.links[i] = button(i === 0 ? "active" : "", num, num)
}
this.sorting = false
this.render("pager")
this.rows().update()
this.setColumns()
this.emit("datatable.update")
}
In my app I had performance issue so I ended up calling dataTable.setColumns()
just after dataTable.insert(table)
https://jsfiddle.net/72smtnvx/2/
from simple-datatables.
@johanneswilm do you recommend to call this.setColumns()
inside update ?
from simple-datatables.
@maximedelpit Thanks for investigating this and the fiddles. In my own test setup this version works: https://github.com/fiduswriter/Simple-DataTables/tree/es2018
Could you check if this works for you? If so, I'll merge it into master and make a release.
from simple-datatables.
@maximedelpit ping!
from simple-datatables.
Hi @johanneswilm,
Sorry, I have been busy and did not see your message. I'm a bit in a rush but will dive on it as soon as possible
from simple-datatables.
@maximedelpit Ok great. Hopefully you have some more time now.
from simple-datatables.
@maximedelpit Unfortunately I needed to merge this for some other bug fix but please let me know if it didn't work out and we'll reopen this issue/
from simple-datatables.
A bit late to the party but I have the same issue. I added a delete button on the last column via columns
render function on creation of the table. However, when I add a new row, the button is not there. You @johanneswilm mentioned a solution, which worked for you, but the link is broken. Can you explain what I can do?
from simple-datatables.
Related Issues (20)
- [BUG] init() method has no options parameter anymore? HOT 6
- events cannot be fired in the chrome environment HOT 2
- [BUG] A form field element should have an id or name attribute - HTML validity
- [BUG] Can't sort numeric columns
- [BUG] Columns.hide() and show() don't work with integer values
- Responsive Mobile HOT 8
- [BUG]`TypeError: Cannot read properties of undefined (reading 'settings')` at re insert table in version ^9.0.0 HOT 4
- [Feature Request] Ability to hide rows HOT 6
- [BUG] searchQuerySeparator not working via CDN HOT 2
- [BUG] columns property not properly generated HOT 2
- [BUG] Destroying and removing the table element is not working correctly HOT 1
- [BUG] data-order HOT 1
- [BUG] attribute data-sort not working in <th> HOT 2
- Sorting with empty cells doesn't work correctly.[BUG] HOT 2
- Input Listeners not working on subsequent pages [BUG] HOT 2
- [BUG] Latest release (9.0.4) is not open source and changes are not visible in GitHub HOT 2
- Support AJAX/Pagination+Search+Sort HOT 2
- How to know which cell is saved
- Support JSON-loading with selective headers HOT 2
- [BUG] Always return true after use destroy() function HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from simple-datatables.