SearchPanes Customization and Functionality

SearchPanes Customization and Functionality

th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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.

This question has accepted answers - jump to:

Answers

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

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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?

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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?

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.
    
  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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!

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @th3t1ck ,

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

    Thanks,
    Sandy

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1
    edited September 2020

    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',
                        },
                    }
              },
            ],
    
  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    @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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    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.

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Any luck Sandy?

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @th3t1ck ,

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

    Thanks,
    Sandy

This discussion has been closed.