SearchPanes Customization and Functionality

th3t1ck

I have a couple different problems with SearchPanes. I'm calling SearchPanes from a bootstrap4 button on the main page. When SearchPanes loads I get panes that are three wide and at least three rows. The "layout: columns-1" seems to have no effect no matter what I set it to.
I'm also having difficulty with the sort, scroll, etc. buttons/icons in the panes. They are tiny but they work. Is there a way to style the search text field at the top of the pane? The pagination buttons do not appear in the panes either and cascadePanes has no effect. I seem to be getting some kind of default SearchPane.

My js and css included files are ...

<link rel="stylesheet" type="text/css" href="css/menu_style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-4-hover-navbar.css">
<link rel="stylesheet" type="text/css" href="common/DataTables/SearchPanes-1.1.1/css/searchPanes.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/SearchPanes-1.1.1/css/searchPanes.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/Editor-1.9.2/css/editor.quill.css"/>
<link rel="stylesheet" type="text/css" href="common/DataTables/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="common/fontawesome-pro5/css/all.css">
<link rel="stylesheet" type="text/css" href="css/highlight-10.1.2.min.css">
<link rel="stylesheet" type="text/css" href="css/quill.snow.css">

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper-1.12.9.min.js"></script>
<script type="text/javascript" src="js/bootstrap-4-hover-navbar2.js"></script>
<script type="text/javascript" src="common/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="common/DataTables/SearchPanes-1.1.1/js/dataTables.searchPanes.min.js"></script>
<script type="text/javascript" src="common/DataTables/SearchPanes-1.1.1/js/searchPanes.bootstrap4.min.js"></script>
<script type="text/javascript" src="common/DataTables/Editor-1.9.2/js/editor.quill.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="common/fontawesome-pro5/js/fontawesome.js"></script>
<script type="text/javascript" src="js/highlight.min.js"></script>
<script type="text/javascript" src="js/quill.min.js"></script>

<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />

and my client side script looks like this...

    var table=$('#cases').DataTable( {
        searchPanes:{
            layout: 'columns-1',
            columns: [1,2],
            cascadePanes: true,
            viewTotal: true,
            dtOpts:{
                dom: 'tp',
                paging: true,
                pagingType: 'numbers',
                searching: false,
            }
          },

        dom: \"<'row dom_wrapper fh-fixedHeader'B<'col-sm col-md'>i<'col-sm col-md'>l<'col-sm col-md'>f<'col-sm col-md'>p>\" +
    \"<'row'<'col-sm col-md'tr>>\" +
    \"<'row'<'col-sm col-md'i><'col-sm col-md'>p>\",
        ajax: 'cases-con.php',
                 ...etc.

buttons: [
          {
           ...etc.
          { 
            extend: 'searchPanes',
            className: 'btn btn-default btn-sm-menu'
          },
        ],
        columnDefs: [
            { className: 'dt-body-nowrap', targets: [ 3, 4, 5, 6 ] },
            { className: 'dt-head-center',  targets: -1 },
            {
                searchPanes:{
                show: true,
                dtOpts:{
                    dom: 'ti',
                    info: true,
                }
              },
                  targets: [1,2]
              }
        ],
        columns: [
                   ...etc.

sandy

Hi @th3t1ck ,

There are a couple of things I can spot/suggest here.

Firstly, when you are initialising SearchPanes in a button you need to configure it using that buttons config option - take a look at this example. This will hopefully solve all of your config related issues.

Beyond this, I would suggest that you use the code in the nightly build. There have been quite a few bugs fixed since the last release. We hope to be making a new release pretty soon.

If you have any further issues beyond this, could you please link to a test case. 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

th3t1ck

Yipee!! Thank you Sandy. That did the trick. I'll check out the nightly builds a little later today. Thanks again for the quick response and fix.

th3t1ck

Ok. Just grabbed the latest build. Thank you for the suggestions.

th3t1ck

So the only problem I can see is the search, sort, clear, icons are super tiny. Is there a way to use some css to make the search text input field smaller? Can I change the width?

th3t1ck

Never mind Sandy. I found the bootstrap js and css and I believe that fixed the search, sort, etc. button problems. The buttons show up at a reasonable size now.

th3t1ck

Darn! I do have one more question. I'd like to have two rows of three columns but I currently have just one row. How do I create two rows?

sandy

Hi @th3t1ck ,

Take a look at this example.

You need to use the searchPanes.layout config option for this, setting it to columns-3 should do the trick.

Thanks,
Sandy

th3t1ck

Yea I had that configured already but it doesn't seem to be working or I'm missing something.

buttons: [
{ 
            extend: 'searchPanes',
            className: 'btn btn-default btn-sm-menu',
                config: {
                    layout: 'columns-3',
                    columns: [6,10,11,12],
                    cascadePanes: true,
                    viewTotal: true,
                    hideCount: false,
                    orderable: true,
//                  searching: false,
                    dtOpts:{
                        dom: 'tp',
                        paging: true,
                        info: true,
                                        pagingType: 'numbers',
                    },
...etc.

sandy

Hi @th3t1ck ,

Yes that should work.

How many panes are actually being displayed? It looks as though you are only considering 4 different columns there using searchPanes.columns. Would it be possible to link to the page please so that I can see the issue there? If not you could try to replicate the issue on http://live.datatables.net/.

Thanks,
Sandy

th3t1ck

So I just checked this morning and I now have a second row with one pane. I'm thinking it was a browser cache issue. I'll have to be conscious next time to do a full reload of the page. Thanks again Sandy for the help and quick response. It's looking good!

th3t1ck

Yes the fourth pane was a test to see if I would get the second row and now it shows up. If the users would like some more panes I'll be able to add them quickly now.

th3t1ck

Sandy, a question. I have some date fields in my SearchPanes. Would I be able to customize one to show only the unique years?

sandy

Hi @th3t1ck ,

You'll need to create a custom pane to achieve that behaviour, take a look at this page.

Thanks,
Sandy

th3t1ck

On initially looking at the link it looks very promising. Thank you Sandy.

th3t1ck

Since I'm using a bootstrap button I'm assuming I would add the custom Pane in the "config:" section below? Is that right?

buttons: [
          { 
            extend: 'searchPanes',
            className: 'btn btn-default btn-sm-menu',
                config: {
                    layout: 'columns-3',
                    columns: [6,11,12,10],
                    cascadePanes: true,
                    viewTotal: true,
                    hideCount: false,
                    orderable: true,
                    dtOpts:{
                        dom: 'tp',
                        paging: true,
                        info: true,
                        pagingType: 'numbers',
                    },
                }
          },
        ],

sandy

@th3t1ck ,

Yes that's right, I've edited my previous example for you with SearchPanes in a button to have a custom pane. Take a look here.

Thanks,
Sandy

th3t1ck

Thank you Sandy. I'll give that a try.

th3t1ck

Ok Sandy. I'm just now getting back to this. I have a custom pane for Year now. I'm trying to filter a mysql date field by Year so only entries for the year selected show in datatables. Although I could modify the example you sent and it works I cannot get my own to work. Here is what I modified using your example live.datatables.net/coxuyodi/1/edit

I also cannot get some panes to display such as start_date on my own application. Also how can I define multiple labels so that the user can see the various years to choose from in the custom pane?

I can PM you a login to my app if you'd like.

sandy

Hi @th3t1ck ,

You should be able to force panes to display using columns.searchPanes.show.

To add more options you would just add to the searchPanes.panes.options array, as marked below.

config: {
    layout: 'columns-3',
    panes: [{
        header: 'Year',
        options: [
            {
                label: 'rowData',
                value: function(rowData, rowIdx){
                    return rowData[4] > '2012' && rowData[4] < '2013';
                }
            },
            {
                label: 'option2',
                value: function(rowData, rowIdx){
                    //Function for option 2
                }
            }
        ]
    }]
}

If you send me a login then I will take a look at the issues that you are seeing. It's hard to debug those without seeing a test case!

Thanks,
Sandy

th3t1ck

I had show set to true. I did a hard refresh of the browser and then I thought about statesave and set statesave to false and it started showing all the panes. Is there a way to set statesave to false for the panes but still have the active filters statesave set to true?

I'll send you a login soon.

sandy

Hi @th3t1ck ,

Using stateSave shouldn't be causing the panes to hide. I suspect that there is something else going on. I'll take a look when I receive the login details from you.

Thanks,
Sandy

th3t1ck

Any luck Sandy?

sandy

Hi @th3t1ck ,

I've sent you a further message. It looks like you are using some fairly outdated SearchPanes code.

Thanks,
Sandy