SearchPanes column span only displaying 1 column

SearchPanes column span only displaying 1 column

puffsterpuffster Posts: 38Questions: 13Answers: 0

First time using searchPanes and I think I'm going to love it! I'm having an initialization issue though. I think I read that by default it will show 3 columns; however, when I simply added the P to the dom it is only showing one column. I added some customization to try to show 2 columns just to see what would happen, and it's still only showing 1 column. I downloaded the searchPanes js from the nightly build, so I should be using the latest. Any idea what I could be doing wrong?

My dataTable init looks like this (columns definitions truncated, there's a LOT of columns):

            var dt = $('#ccr2018').DataTable({
                paging: false,
                fixedColumns: {
                    leftColumns: 3,
                scrollX: true,
                scrollY: "60vh",
                buttons: [
                data: det,
                order: [
                    0, 'asc'
                language: {
                    info: "Showing " + distinctStuds.size + " students"
                searchPanes: {
                    columns: [3, 4, 5, 6, 7, 8, 9, 10, 11, 14, 16, 17, 18, 19, 22, 23, 27, 29, 30, 32, 33, 34, 35, 36, 37, 38],
                    layout: 'columns-2',
                dom: "PfBrti",
                columns: [
                        className: "detailRow text-left",
                        data: "lastName",
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                                return data;

And the results look like this:

This question has an accepted answers - jump to answer


  • sandysandy Posts: 339Questions: 0Answers: 99
    Answer ✓

    Hi @puffster ,

    In the image you have provided it looks as though you aren't pulling in the SearchPanes css. It is also worth bearing in mind that searchPanes.columns does not set which panes will definitely show, but which will be considered to show through use of the searchPanes.threshold option. If you want to force specific SearchPanes to show, you will need to use the option.


  • puffsterpuffster Posts: 38Questions: 13Answers: 0

    I am so DUMB!! I completely forgot to pull in the CSS file, that's what it was. Thanks for being a fresh set of eyes!!

Sign In or Register to comment.