SearchPanes Rendering

SearchPanes allows for full integration with the rendering functions already provided for DataTables (columns.render). The primary advantage of using a renderer is that you can modify the output without modifying the original data. Details on making your own rendering function can be found here. SearchPanes also makes use of orthogonal data in some cases, details of which can be found here.

Basic Rendering with SearchPanes

Consider the following common rendering function

{ 
    data: "salary", 
    render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) 
}

Here we are rendering the raw data in each cell in the salary column to make it more readable and in a format that can be understood easily. In this case SearchPanes will display the data in the same format as the DataTable, automatically detecting the rendering function. When searching the table the search will be performed on the original data from the table.

When defining a custom rendering function such as the following

{ 
    data: "salary", 
    render: function(data, type, row){
        if(row.salary <= 200000){
            return "Low";
        }
        else if (row.salary <=800000){
            return "Medium";
        }
        else if (row.salary > 800000){
            return "High";
        }
        else {
            return "Other";
        }
    } 
}

The rendering function will again display the data in the same way as the DataTable. However now it will filter on these options.

Rendering Arrays with SearchPanes

Consider the following rendering function

{ 
    data: "permission",
    render: {
        _: '[, ].name',
        sp:'[].name'
    },
    searchPanes: {
        orthogonal:'sp'
    }
}

Here the original data in the array format will be displayed as a string with ', ' seperators in the DataTable. SearchPane each different element in the arrays will be given an option. When searching on those options any row which contains that option in the original array will be shown.