Sorts

Sorts Api

What are sorts in Gridifier?

Sorts are functions, that are used to sort inserted items set with any used insert function. Sort function structure:


var grid = new Gridifier(demoGrid, {
    // Without sort parameter, 'default' sort will be used.
    // (By original items order in domCollection array)
    sort: function(first, second, sort) {
        // Sort(3-rd param) is a special object with sort helper functions.
        // Return sort comparator result here.
    }
});
        

Sorts demo grid:

Resort on:

disabled
sort
sort,append

Sort by:

default
color: asc
number: asc

Controls:

append 10
clear grid
Sorts demo grid simplified example
demonstration of sorts usage in demo grid

var grid = new Gridifier(demoGrid, {
    sort: {
        // Without "selected" param "default" sort will be selected by default
        byColorAsc: function(first, second, sort) {
            return sort.byDataInt(first, second, "data-color-index"/* by data attr */);
        },

        byColorDesc: function(first, second, sort) {
            return sort.byDataInt(first, second, "data-color-index", true/* desc param */);
        },

        byNumberAsc: function(first, second, sort) {
            return sort.byContentInt(first, second/* by innerHTML */);
        },

        byNumberDesc: function(first, second, sort) {
            return sort.byContentInt(first, second, true/* desc param */);
        }
    }
});

// To resort all grid after each insert use onInsert event
grid.onInsert(function() { if(/* check if 'sort,append' button is enabled */) grid.resort(); });
        
sort selects(simplified)

TouchClickEvent.listen(selectSortByColorButton, function() {
    grid.sort((/* checks, if select by asc sort */) ? "byColorAsc" : "byColorDesc");

    // By default, sort will be applied only to inserted items.
    // So, you should call resort() if you want to resort all grid items.
    if(/* check if 'sort' button is enabled */) grid.resort();
});

// ... Similar code per selectSortByNumberButton and default sort
        

How to select/pass built-in/custom sort?

sort()
sort = function(sortName)

var grid = new Gridifier(targetGrid, {/* Pass sorts here or build custom version */});
grid.sort('sortName');
        
sort setting with function
new Gridifier(grid, {sort: function(first, second, sort) { ... }})

var grid = new Gridifier(targetGrid, {
    // Sort also can be passed as single function
    // (Will be enabled by default and available with name "userfn")
    sort: function(firstItem, secondItem, sort) { /* Return sort comparator result */ }
});

grid.sort("default");
grid.sort("userfn"); // You can select it later by "userfn" name
        
sort setting with multiple functions(object)
new Gridifier(grid, {sort: {selected: "firstSort", "firstSort": function(...) { ... }})

var grid = new Gridifier(targetGrid, {
    // Sort can be passed as object with function name/function pairs
    sort: {
        // You can set initial used function with 'selected' param
        selected: "firstSort", // ('default' sort(by array order) will be enabled by default)

        // Sort(3-rd param) is a special object with sort helpers
        firstSort: function(first, second, sort) { /* Return sort comparator result */ },
        secondSort: function(first, second, sort) { /* Return sort comparator result */ },
        // ... More functions
    }
});

grid.sort("secondSort"); // You can switch sorts later
        
sort setting from custom version(string)
new Gridifier(grid, {sort: "customSort"})

// Extend src/api/settings.js class and build custom version with Grunt
var Settings = function() {
    this._settings = {
        // ...
        sort: {
            // Define your custom sort fn inside sort object
            customSort: function(first, second, sort) {
                // return comparator result here
            }
        },
        // ...
    };
};
var grid = new Gridifier(targetGrid, {sort: "customSort"});
            

By default, Gridifier will sort only inserted items collection. To resort all grid items after inserts/sort calls use resort() function.

resort()
resort = function()

Notice.
Don't call resort function inside onReposition/onGridResize events, if you want resort all grid items after inserts. This will cause endless loop. For this purpose use onInsert event.

Sort helpers

What are sort helpers?

What sort helpers are available?

By data attribute:

By innerHTML:

By query [0] innerHTML:

Parameters:

sort helper examples

var grid = new Gridifier(targetGrid, {sort: function(first, second, sort) {
    // If you aren't using sort helpers, never return 0 from comparator.
    // (most of browsers uses unstable sorts and equal items will 'jump' around)
    return sort.byOriginalPos(first, second); // Use this helper instead of returning 0(stable)

    // Sort by "data-sort-attr" attributes(desc) after replacing "#" chars with "" and applying parseInt(value, 10)
    return sort.byDataInt(first, second, "data-sort-attr", true, [["#", ""]]);

    // Sort by innerHTML values(asc) after applying parseFloat(value)
    return sort.byContentFloat(first, second);

    // Sort by query first result innerHTML(asc)
    return sort.byContent(first, second, ".childElement");
});
            

Multiple sorts

To sort first by one value, than by second value in each group of equal elements from first sort you can pass array of parameters to byDataInt and byContent sort helpers. For more complex cases you can write custom comparator.

Multiple sorts demo grid:

Resort on:

disabled
sort
sort,append

Multiple sort by:

1. color: asc
2. number: asc

Controls:

append 10
clear grid
Multiple sorts demo grid simplified example
demonstration of multiple sorts usage in demo grid

var grid = new Gridifier(demoGrid, {
    sort: {
        selected: "byColorAscThenByNumberAsc",

        byColorAscThenByNumberAsc: function(first, second, sort) {
            return sort.byDataInt(first, second, ["data-color-index", "data-position-index"]);
        },

        byColorDescThenByNumberAsc: function(first, second, sort) {
            return sort.byDataInt(first, second, ["data-color-index|desc", "data-position-index"]);
        },

        byColorAscThenByNumberDesc: function(first, second, sort) {
            return sort.byDataInt(first, second, ["data-color-index", "data-position-index|desc"]);
        },

        byColorDescThenByNumberDesc: function(first, second, sort) {
            return sort.byDataInt(first, second, ["data-color-index|desc", "data-position-index|desc"]);
        }
    }
});

// ... Sort selects are similar to first sorts demo example on this page
            

How to use multiple sorts with sort helpers?


next: Filters prev: Renderers
Ξ
GRIDIFIER.IO
x