Code Monkey home page Code Monkey logo

Comments (11)

Holt59 avatar Holt59 commented on August 19, 2024 1

Closing this for now. Feel free to open a new issue if necessary!

from datatable.

Holt59 avatar Holt59 commented on August 19, 2024

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.

torstenroeder avatar torstenroeder commented on August 19, 2024

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.

Holt59 avatar Holt59 commented on August 19, 2024

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.

torstenroeder avatar torstenroeder commented on August 19, 2024

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.

Holt59 avatar Holt59 commented on August 19, 2024

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.

torstenroeder avatar torstenroeder commented on August 19, 2024

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.

Holt59 avatar Holt59 commented on August 19, 2024

@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.

torstenroeder avatar torstenroeder commented on August 19, 2024

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.

Holt59 avatar Holt59 commented on August 19, 2024

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.

torstenroeder avatar torstenroeder commented on August 19, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.