SearchPanes # of Values not formatted, pushed up against value

SearchPanes # of Values not formatted, pushed up against value

puffsterpuffster Posts: 61Questions: 22Answers: 0

Slowly learning to use searchPanes and LOVING it!! My new problem is that for each column, the # of each filter is not formatted and being pushed up right next to the value, like in the picture below.

I've searched through the forum and can't find anybody else reporting this so I'm sure it's something I'm doing. I'm using bootstrap 4 and my searchPanes js and css files are from the nightly build and about a day old.

When I inspect the ECE object I see this:

<tr role="row" class="odd">
    <td class="dtsp-nameColumn sorting_1"><span class="dtsp-name">No</span><span class="dtsp-pill">558</span></td>
</tr>

Below is my dataTables setup in js.:

            var dt = $('#ccr2018').DataTable({
                paging: false,
                fixedColumns: {
                    leftColumns: 3,
                },
                scrollX: true,
                scrollY: "60vh",
                buttons: [
                    'excelHtml5',
                ],
                data: det,
                order: [
                    0, 'asc'
                ],
                language: {
                    info: "Showing " + distinctStuds.size + " students"
                },
                searchPanes: {
                    layout: 'columns-4',
                    viewTotal: true,
                },
                dom: "PfBrti",
                columns: [
                    {
                        className: "detailRow text-left",
                        data: "lastName",
                        searchPanes: {
                            show: false,
                        },
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                            }
                            else
                                return data;
                        }
                    },
                    {
                        className: "detailRow text-left",
                        data: "firstName",
                        searchPanes: {
                            show: false,
                        },
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                            }
                            else
                                return data;
                        }
                    },
                    {
                        className: "detailRow text-center",
                        data: "ssid",
                        searchPanes: {
                            show: false,
                        },
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                            }
                            else
                                return data;
                        }
                    },
                    {
                        className: "detailRow text-center",
                        data: "ece",
                        searchPanes: {
                            show: true,
                        },
                        render: function (data, type, full, meta) {
                            if (type === 'display') {
                                if (currentStudent == det[meta.row].personID) {
                                    return '<span class="sameStudent">' + data + '</span>';
                                }
                            }

                            return data;
                        },
                    },
                    {
                        className: "detailRow text-center pr-3 pl-3",
                        data: "race",
                        searchPanes: {
                            show: true,
                        },
                        render: function (data, type, full, meta) {
                            if (type === 'display') {
                                if (currentStudent == det[meta.row].personID) {
                                    return '<span class="sameStudent">' + data + '</span>';
                                }
                            }

                            if (data == 'Black or African American' || data == 'Hispanic/Latino' || data == 'White') 
                                return data
                            else
                                return 'Other';
                        }
                    },
                    {
                        className: "detailRow text-center",
                        data: "actMath",
                        searchPanes: {
                            show: true,
                        },
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                            }
                            else
                                return '<span class="' + det[meta.row].actMathStatus + '">' + data + '</span>';
                        }
                    },
                    {
                        className: "detailRow text-center",
                        data: "actEnglish",
                        searchPanes: {
                            show: true,
                        },
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                            }
                            else
                                return '<span class="' + det[meta.row].actEnglishStatus + '">' + data + '</span>';
                        }
                    },
                    {
                        className: "detailRow text-center",
                        data: "actReading",
                        searchPanes: {
                            show: true,
                        },
                        render: function (data, type, full, meta) {
                            if (currentStudent == det[meta.row].personID) {
                                return '<span class="sameStudent">' + data + '</span>';
                            }
                            else
                                return '<span class="' + det[meta.row].actReadingStatus + '">' + data + '</span>';
                        }
                    },
                ],
                createdRow: function (row, data, dataIndex) {
                    currentStudent = data.personID;

                    if (dataIndex == 0)
                        prevStudent = data.personID;

                    if (currentStudent != prevStudent) {
                        currentBGColor = currentBGColor == 'bg' ? 'bgAlt' : 'bg';
                        prevStudent = currentStudent;
                    }

                    $(row).addClass(currentBGColor);
                }
            }); 

            dt.on('select.dt', () => {
                dt.searchPanes.rebuildPane(0, true);
            });

            dt.on('deselect.dt', () => {
                dt.searchPanes.rebuildPane(0, true);
            });

            $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();

This question has accepted answers - jump to:

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @puffster ,

    Are you pulling in the correct styling files? If you are using bootstrap4 styling then you will need to pull in the SearchPanes bs4 styling. I've listed below the files that you will need.

    <link rel="stylesheet" type="text/css" href="https://nightly.datatables.net/searchpanes/css/searchPanes.bootstrap4.css"/>
     
    <script type="text/javascript" src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js"></script>
    <script type="text/javascript" src="https://nightly.datatables.net/searchpanes/js/searchPanes.bootstrap4.js"></script>
    
    

    If this doesn't solve your issue then can you please provide a running test case, as noted in the forum rules. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Thanks,
    Sandy

  • puffsterpuffster Posts: 61Questions: 22Answers: 0

    OK so it's definitely something with my CSS or JS files. I pulled in the bootstrap 4 files and it formatted the # of each value into a pill, but it's still pushed up next to the value. At that point I commented out all of my includes and used just the CDN CSS and JS referenced in the searchPanes Basic Initialization example and it worked perfectly. So I just need to figure out which of my includes is the culprit.

    One other quick question -- I'm assuming in the Build-A-File download section, it includes the latest version of each file -- NOT what's in the nightly build, correct?

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    Hi @puffster ,

    The download section provides links to the files that are on the CDN, which are stable releases. The nightly files are inherently less stable as they are updated every time there is a push to one of the repos, but there are a whole series of tests that we run before doing that so it should be fairly ok.

    The download section is actually a really good way to work out what files you need. If you go there a choose to not concatenate or minify the files, then it is really straightforward to convert them to nightly files. That is actually what I did above!

    Let me know how you get on, as I mentioned above though, in order to help further I will need to see a test case.

    Thanks,
    Sandy

This discussion has been closed.