Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lav's avatar
Level 1

Filter a data using Data table on click event.

My basic requirement is that when we click on the drop-down button select any value that will go to the data table. By which we can filter data from the controller.

#triptype it the id of the drop-down. #order it is the id for the table. Apart from this, we want to send one more variable that is which type filter you want to filter. In this way, what type of data is required for the user?

Here is the code

$('#tripType').change(function(e){
        e.preventDefault();
        var filtertables = $('#orders').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": "ordersFilterAjaxData",
            "columns": [
                { "data": "tripId" },
                { "data": "username" },
                { "data": "MTS" },
                { "data": "drivername" }, 
                { "data": "date" },
                { "data": "time" },
                { "data": "user_order_amount" },
                { "data": "user_order_pay_mode" },
                { "data": "user_order_status" },
                { "data": "rideStatus" }, 
                { "data": "Dvr" },
                { "data": "Serv" },                 
            ]
        });
        filtertables.destroy();
    });
0 likes
5 replies
lav's avatar
Level 1

@van1310 I don't wanna this type of filter. What am I trying to do is send in filter parameter along with that . for example there are four parameters for the drop-down such as all trips, booked, rejected and disputed trips. If select a booked trip then we filter out from the controller side. Then data is sent to the blade side.

1 like
lav's avatar
Level 1

@van1310

I try this. its working fine for me.

$('#tripType').change(function(e){
        e.preventDefault();
        var filtertables = $('#orders').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": {
                url:"/ordersFilterAjaxData",
                "data": function ( d ) {
                    d.extra_search = $('#tripType').val();
                }
            },
            "columns": [
                { "data": "tripId" },
                { "data": "username" },
                { "data": "MTS" },
                { "data": "drivername" }, 
                { "data": "date" },
                { "data": "time" },
                { "data": "user_order_amount" },
                { "data": "user_order_pay_mode" },
                { "data": "user_order_status" },
                { "data": "rideStatus" }, 
                { "data": "Dvr" },
                { "data": "Serv" },                 
            ]

        });

Getting data to the controller.

1 like
vandan's avatar

@lav when your question sovled for please give best answer to happy

Please or to participate in this conversation.