How Do I Create Multiple Header Rows Using Footable & AJAX

Question

I would like to create footables that have multiple header rows and am having no luck doing this. I'm using a combination of web services/json to pull in my headers and data from a SQL database.

The code below works great but obviously produces just one header row:

        function loadTable() {
            $('#eocScreen').footable({
                ajaxEnabled: true,
                sorting: {
                    enabled: false
                },
                paging: {
                    enabled: false,
                    total: rowData.length,
                    size: 15,
                    current: parseInt(FooTable.utils.getURLParameter('page')) || 1
                },
                filtering: {
                    enabled: false
                },
                //columns: colIndex,
                columns: { 
                    0: {name: 'locationName', title: 'school' },
                    1: { name: 'graduate', title: 'Number of Graduates' }
                },
                ajax: FAjax.request
            })
        }

I've tried various methods to add a second row, but I'm just not skilled enough to figure it out at this point...a couple of things I've tried are:

                columns: { 
                    0: {name: 'locationName', title: 'school' },
                    1: { name: 'graduate', title: 'Number of Graduates' }
                }
                {                    
                0: { title: 'loc' },
                    1: { title: 'seniors' }
                },


                columns: [{ 
                    0: {name: 'locationName', title: 'school' },
                    1: { name: 'graduate', title: 'Number of Graduates' }
                },
                {                    
                0: { title: 'loc' },
                    1: { title: 'seniors' }
                }],

Any help would be greatly appreciated!!