Custom radio filter with server side processing

Custom radio filter with server side processing

MazecMazec Posts: 12Questions: 0Answers: 0
edited April 11 in Free community support

Hello,

please refer to how to do the filtering using, for example, the switch switch. See the screenshot and show where it works, but without the server-side.

I need to work on the server-side. How to edit my HTML,JS and data.php? Do my filter work as outlined on the screenshot?

Thank you very much for the tips.

https://codeproject.com/Articles/1080341/jQuery-DataTables-with-Custom-Client-Side-Filters


Replies

  • MazecMazec Posts: 12Questions: 0Answers: 0

    In fact, should it be like the link I sent?
    Could it just filter at JS client level in JSON?
    That would be better, I would not like to pull in the data.php
    I tried it and it did not work out of the link as I sent.
    So if you knew any other tutorial, ideally here from datatables page (not found here) ideally with live demo.

  • MazecMazec Posts: 12Questions: 0Answers: 0
    edited April 11

    Sorry, deleted.

  • MazecMazec Posts: 12Questions: 0Answers: 0

    Sorry for triplepost, because first port i canot edit.

    I have:

    <div class="form-group">
        <label class="control-label">Filter by Position:</label>
            <input class="customRadioButton" id="all" type="radio" name="searchRadio" value="" checked>All
            <input class="customRadioButton" id="118" type="radio" name="searchRadio" value="118">118                                   
            <input class="customRadioButton" id="120" type="radio" name="searchRadio" value="120">120
            <input class="customRadioButton" id="117" type="radio" name="searchRadio" value="117">117
    </div>
    
    
     <table class="display" id="vypisDb">
        <thead>
            <tr>
                <th style="display:none;">Col1</th>
                <th>ID(117,117,120,etc.)</th>
                <th>Col2</th>
                <th>Col3</th>
                ...
            </tr>
        </thead>
    </table>
    
    <script type="text/javascript">
                $(document).ready(function() {
                    var dataTable = $('#vypisDb').DataTable( {
    
                        "pageLength": 100,
                        "bInfo" : false,
                        //"order": [[ 7, "desc" ]],
                        "bLengthChange": false,
                        "processing": true,
                        "serverSide": true,
    
    
                        "ajax":{
                            url :"data.php", // json datasource
                            type: "post",  // method  , by default get
                            error: function(){  // error handling
                                $(".vypisDb-error").html("");
                                $("#vypisDb-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                                $("#vypisDb-grid_processing").css("display","none");
    
                            }
                        },  
                    "language": {
                    "url": "../../assets/DataTables/dataTables.czech.lang"
                            },
    
        "paging": true,
        "autoWidth": true,
    
    
                    } );
    
                    //Event Listener for custom radio buttons to filter datatable
                        $('.customRadioButton').change(function () {
                            dataTable.columns(1).search(this.value).draw();
                        }); 
                } );
    
    
    </script>
    
  • MazecMazec Posts: 12Questions: 0Answers: 0

    Here is live dem without my server-side: live.datatables.net/laniwiqe/1/edit?html,js,console,output

  • colincolin Posts: 458Questions: 0Answers: 85

    Hi @Mazec ,

    Yep, that live dem above (you need to move the closing braces to make it work) is all you really need. The server-side stuff is done behind the scenes, it takes care of those searches for you once the PHP script is in place.

    If you take a look at this example here , the configuration on the client is minimal. If you open up the console, with the Ajax tab open, type this:

    table = $('#example').DataTable()
    table.column(1).search('Cox').draw()
    

    This is effectively what you'll be doing with your column searches. You'll see nothing extra is required on the Ajax line.

    Hope that helps,

    Cheers,

    Colin

  • MazecMazec Posts: 12Questions: 0Answers: 0
    edited April 11

    thanks for you response table.column(1).search('Cox').draw() It works, but it does not work as soon as I want to set it over javascript on a radiobutton.

    live.datatables.net/laniwiqe/5/edit?html,js,console,output

  • JoyrexJoyrex Posts: 83Questions: 12Answers: 3

    You need to move the event listener into your document.ready() block, and on the column() you need to specify which column by Javascript numbering:

    http://live.datatables.net/laniwiqe/6/edit

  • MazecMazec Posts: 12Questions: 0Answers: 0
    edited April 13

    Thanks you for tips. You code in live demo is working, but this code in my server with server-side processing stay not working. :-(

    http://live.datatables.net/hihusulo/1/edit?js,console,output

    Because in my code is only with AJAX in datatables constructor:

  • MazecMazec Posts: 12Questions: 0Answers: 0

    Any tips please? How to filtering in server-side processing?

  • colincolin Posts: 458Questions: 0Answers: 85

    Hi @Mazec ,

    It's hard to see what you're doing, since the example doesn't show live data, it's all static in the HTML. This simple example here shows Ajax and serverSide working together with filtering.

    When you say it's not working, could you give more information - and to get the best feedback, a live example would greatly help.

    Cheers,

    Colin

Sign In or Register to comment.