Comments (11)
Closing this for now. Feel free to open a new issue if necessary!
from datatable.
You can use the sortKey
and sortDir
options.
For instance, if want the column 0 / 2 / 3 and 5 to be sortable, and you want to sort regarding the second column in descending order, you can use:
var opts = {
'sort': [true, false, true, true, false, true],
'sortKey': 2,
'sortDir': 'desc'
};
If the table contains object as row (and not simple array), you can use the key you want to sort on, e.g.:
var opts = {
'sort': {
id: true,
name: true,
mail: false
},
'sortKey': 'name',
'sortDir': 'asc' // this is the default
};
from datatable.
Thanks! Sorry, I still could not make it work. The table header looks like the 2nd column is sorted (little triangle ponting down), but it is not. Actually the sorting does not work at all. Code looks like this:
var datatable = new DataTable(document.querySelector('#dataTable'), {
pageSize: 20,
sort: {a:true, b:true, c:true, d:false},
//sort: [true, true, true, false],
sortKey: 'b',
sortDir: 'desc',
filters: [true, true, true, false],
filterText: '*'
});
and my table:
<thead>
<tr>
<th data-sort="a">Ord.</th>
<th data-sort="b">#</th>
<th data-sort="c">Titel</th>
<th data-sort="d">Links</th>
</tr>
</thead>
Any help is appreciated!
from datatable.
Since you are not specifying the data
option explicitly, you will get a 2D array of data, so you need to use numeric keys (0 to 3). Non-numeric key only works if you use custom data inputs:
// This is a 2D array of data, you need to use numeric keys (e.g. here 0 will give you
// the first name, 1 the last name and 2 the field of study. This is the type of data
// you get when loading data from an already existing HTML table, as in your case.
var data = [
['Isaac', 'Newton', 'Physics'],
['Ada', 'Lovelace', 'Computer Science'],
['Henri', 'Poincaré', 'Mathematics']
];
// This is a array of object, you can send it directly to the table, and after that you
// can use non-numeric key
var data = [
{
firstname: 'Isaac',
lastname: 'Newton',
field_of_study: 'Physics'
},
{
firstname: 'Ada',
lastname: 'Lovelace',
field_of_study: 'Computer Science'
},
{
firstname: 'Henri',
lastname: 'Poincaré',
field_of_study: 'Mathematics'
}
];
There might also be issue for the default sort to work (e.g. if you want to sort numeric value that are stored as strings), you can check how the inner data looks like doing the following (e.g. in a dev. console):
var datatable = new DataTable(...);
// query all data
datatable.all();
from datatable.
Sorry, I forgot to mention that I have all data in a HTML table. I prefer it for conversion issues. Is it possible to define the keys within using data-[something]?
from datatable.
Not currently, if you are applying datatable on an existing HTML table, the data will be stored as a 2D array so you have to use the numeric keys unfortunately.
from datatable.
That would still be fine ... I tried this, but the default sorting does not start. Not sure whether the code is correct (sorry for bothering):
var datatable = new DataTable(document.querySelector('#dataTable'), {
pageSize: 20,
sort: [true, true, true, false],
sortKey: 2,
sortDir: 'asc',
filters: [true, true, true, false],
filterText: '*'
});
from datatable.
@torstenroeder What happens if you click on the column (to sort)? It is possible that the plugin is not able to sort the data because of their format - I would need to see a chunk of the data (datatable.all()
) in order to be more helpful.
from datatable.
Ok, data
looks like this:
data:[ [
"<div class=\"smaller\" title=\"ord\" data-sort=\"18340610\">340610</div>",
"<div class=\"smaller\" title=\"id\">001</div>",
"<div class=\"title\">Example</div>",
"<div><a href=\"example.html?fn=340610.xml\" target=\"_blank\">open</a></div>"
], ... ]
Do you need more information from datatable
?
PS. I have practically solved the issue by pre-sorting the data before generating the table. Nonetheless it would still be interesting why default sorting does not start in this case.
from datatable.
The plugin does not really work if you have DOM embedded in the HTML table, the way to get custom rendering is by customising the lineFormat
option usually.
If every cell of the same column uses the same wrapper, the sorting function should work (the filter one might be a little buggy with DOM). Did you look at the console output (development console in your web browser)? Maybe there is an error that could be useful.
from datatable.
Sorry for the (long weekend) delay. To a certain extend I need DOM in the table cells, so I won't be able to avoid it totally. For the moment, sorting works fine when I set a data-sort attribute. The console display gives no errors. So, together with the pre-sorting, everything runs smoothly.
from datatable.
Related Issues (20)
- IE 11: Pagination and filter not working correctly HOT 2
- Inject data to table row HOT 4
- Nullpointer Exception table with filter and no data
- Not working on my project :( HOT 6
- CSS not work HOT 4
- Extract filtered records HOT 11
- Filter outside the table HOT 2
- No idea how to make filter outside table HOT 1
- Get number of a table row. HOT 6
- Update table data HOT 19
- Process Ajax Data Before Displaying on Table! HOT 3
- Using Filter/Sort with hidden child rows HOT 3
- Question: How to search/filter multiple columns with one search field HOT 2
- Was cleared all attributes from td. HOT 1
- Click in a row event HOT 3
- Filter by date mm/dd/yyyy HOT 1
- Ajax Doesn't Work HOT 4
- filter is not function after apply addRows HOT 2
- Table reload method HOT 2
- how can i implement for rowspan ? HOT 3
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 datatable.