Sorting outside of Header

[timdmaxey]

Not really an issue, just wondering if there a way to invoke the sort outside of the headers? Like have the table on the page in a right div and a menu to the left for sorting? You could still click "First Name" on the header (which works fine) then ALSO click a button to sort by First Name too..?

Again, thank you so so much for your time!!

[eisenbraun]

Yes, you can do that. Here is an example how:

//Getting data and initializing Columns
$.ajax({
        url:'data.json',
        dataType: 'json', 
        success: function(json) { 
           //Take note that I set a global variable to value of the columns initialization expression
            example3 = $('#example3').columns({
                data:json,
                schema: [
                    {"header":"ID", "key":"id", "template":"000{{id}}"},
                    {"header":"Name", "key":"name"},
                    {"header":"Email", "key":"email", "template":'<a href="mailto:{{email}}">{{email}}</a>'},
                    {"header":"Gender", "key":"gender"}
                ]

            }); 
        }
 }); 

//Create button event listener
$('#button').click(function() {
    //setting the column to be sorted, by setting sortBy of the global variable to the column key
    example3.sortBy = 'name';

    //Now rebuild the table using the create method
    $('#example3').columns('create');
});

That is it. Let me know if you have any questions, and you can always refer to the documentation.

Thanks for using Columns.

Michael

[timdmaxey]

Man! Thank you!

[timdmaxey]

I looked over the documentation and didn't see any of this with the variable, wanted to see how clicking the button a second time would sort descending, then ascending etc... :-) thanks!

[eisenbraun]

Sorry, it took me so long to get back to you.

You need to the reverse option. So button handler could look something like this.

//Create button event listener
$('#button').click(function() {
    //setting the column to be sorted, by setting sortBy of the global variable to the column key
    example3.sortBy = 'name';
    example3.reverse = !example3.reverse;

    //Now rebuild the table using the create method
    $('#example3').columns('create');
});

Michael

[timdmaxey]

Perfect, thank you...

On Fri, Nov 20, 2015 at 6:20 AM Michael Eisenbraun notifications@github.com wrote:

Sorry, it took me so long to get back to you.

You need to the reverse option. So button handler could look something like this.

//Create button event listener $('#button').click(function() { //setting the column to be sorted, by setting sortBy of the global variable to the column key example3.sortBy = 'name'

; example3.reverse = !example3.reverse;

//Now rebuild the table using the create method $('#example3').columns('create'); });

Michael

— Reply to this email directly or view it on GitHub https://github.com/eisenbraun/columns/issues/17#issuecomment-158365625.