Examples of using Columns

Example 1: Setting data inline

                
    $('#example1').columns({
        data: [
            {'Emp. Number': 00001, 'First Name':'John', 'Last Name':'Smith' },
            {'Emp. Number': 00002, 'First Name':'Jane', 'Last Name':'Doe' },
            {'Emp. Number': 00003, 'First Name':'Ted', 'Last Name':'Johnson' },
            {'Emp. Number': 00004, 'First Name':'Betty', 'Last Name':'Smith' },
            {'Emp. Number': 00005, 'First Name':'Susan', 'Last Name':'Wilson' },
            {'Emp. Number': 00006, 'First Name':'John', 'Last Name':'Doe' },
            {'Emp. Number': 00007, 'First Name':'Bill', 'Last Name':'Watson' },
            {'Emp. Number': 00008, 'First Name':'Walter', 'Last Name':'Wright' }
        ]
    });

Example 2: Setting data from external source

                 
    $.ajax({
        url:'data.json',
        dataType: 'json', 
        success: function(json) { 
            example2 = $('#example2').columns({
                data:json, 
            }); 
        }
    });

Example 3: Using a custom schema

                 
    $.ajax({
        url:'data.json',
        dataType: 'json', 
        success: function(json) { 
            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"}
                ]

            }); 
        }
    });

Example 4: Using a conditional statement

                

    $.ajax({
        url:'data.json',
        dataType: 'json', 
        success: function(json) { 
            example4 = $('#example4').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", "condition":function(val) {return (val=="male");}}
                ]

            }); 
        }
    });

Example 5: Large Data Set

                

    $.ajax({
        url:'large-data.json',
        dataType: 'json', 
        success: function(json) { 
            example5 = $('#example5').columns({
                data:json
            }); 
        }
    });

Example 6: Using Go To Page Plugin

                

    $.ajax({
        url:'data.json',
        dataType: 'json', 
        success: function(json) { 
            example6 = $('#example6').columns({
                data:json,
                schema: [
                    {"header":"ID", "key":"id", "template":"000{{id}}-{{name}}"},
                    {"header":"Name", "key":"name", "template":'{{#name}} {{name}} {{/name}} {{^name}} Unknown Author {{/name}}'},
                    {"header":"Email", "key":"email", "template":'{{email}}'}
                ],
                templateFile: 'templates/custom.mst',
                plugins:['gotopage']

            }); 
        }
    });

Example 7: Using Ajax Paging Plugin

            

    $.ajax({
        url:'data.php',
        dataType: 'json', 
        success: function(json) { 
            example7 = $('#example7').columns({
                data:json.data,
                pages: json.pages,
                total: json.total,
                plugins:['ajaxpaging']
            }); 
        }
    });