Show a search tab and pagination in JQuery

Table Responsive is not working. What am I saying, search tab and pagination not showing in the table?

$( document ).ready(function()
{
$('#tripType').change(function(){
                var res='';
                var orders = <?php echo json_encode($orderdetail); ?>;
                res+='<div class="table-responsive"><table id="orders" class="table table-list {{ '+orders.length+' > 0 ? "datatable" : '' }}" data-page-length="10">';
                if($(this).val()== 'all'){
                    var html = coloumnHeading();
                    res+=html;
                    $.each (orders, function (key, value){
                        if(value!=null || value!='' || value!=undefined){
                            var htmldata1 = coloumnData(value);
                            res+=htmldata1;
                        }else{
                            res+='<tr><td colspan="12">No entries in table</td></tr>';
                            return false;
                        }
                    });
                    res+='</table></div>'
                    console.log(res);
                    $('.trip_info').html(res);
                    $('#show_coloum').empty();
                    addcoloummaster();
                }
            });
            });
function coloumnHeading(){
        var htmlcolheading='<thead><tr><th id="hidecolumn1">Transaction ID <i data-thid="th1" id="hidecolumn1" class="fa fa-times close cross"></i></th><th id="hidecolumn2">Cust Name <i data-thid="th2" id="hidecolumn2" class="fa fa-times close cross"></i></th><th id="hidecolumn3">MT ID <i data-thid="th3" id="hidecolumn3" class="fa fa-times close cross"></i></th><th id="hidecolumn4">Driver Name <i data-thid="th4" id="hidecolumn4" class="fa fa-times close cross"></i></th><th id="hidecolumn5">Trip Date <i data-thid="th5" id="hidecolumn5" class="fa fa-times close cross"></i></th><th id="hidecolumn6">Pick-Up Time <i data-thid="th6" id="hidecolumn6" class="fa fa-times close cross"></i></th><th id="hidecolumn7">Value (Rs.) <i data-thid="th7" id="hidecolumn7" class="fa fa-times close cross"></i></th><th id="hidecolumn8">Payment Mode <i data-thid="th8" id="hidecolumn8" class="fa fa-times close cross"></i></th><th id="hidecolumn9">Payment <i data-thid="th9" id="hidecolumn9" class="fa fa-times close cross"></i></th><th id="hidecolumn10">Trip Status <i data-thid="th10" id="hidecolumn10" class="fa fa-times close cross"></i></th><th id="hidecolumn11">Dvr <i data-thid="th11" id="hidecolumn11" class="fa fa-times close cross"></i></th><th id="hidecolumn12">Serv <i data-thid="th12" id="hidecolumn12" class="fa fa-times close cross"><i></th></tr></thead>';
        return htmlcolheading;
    }
    function coloumnData(value){
        var html1 ='<tr data-entry-id=""><td><a href="{{ url('/transaction_detail') }}"></a></td><td>'+value.user_first_name+' '+value.user_middle_name+' '+value.user_last_name+'</td><td></td><td>'+value.driver_first_name+' '+value.driver_last_name+'</td><td>'+value.date+'</td><td>'+value.time+'</td><td>'+value.user_order_amount+'</td><td>'+value.user_order_pay_mode+'</td><td>'+value.user_order_status+'</td>';
            if(value.ride_status == "ongoing") 
        var html2 ='<td><button class="btn btn-ongoing">Ongoing</button></td>';
            else if(value.ride_status == "disputed")
        html2 ='<td><button class="btn btn-disputed">Disputed</button></td>';
            else if (value.ride_status == "pending" || value.ride_status == "ongoing" ||value.ride_status == "started")
        html2='<td><button class="btn btn-ongoing">Booked<i class="fa fa-times txt-red" data-toggle="modal" data-target="#cancel_trip"></i></button></td>';
            else
        html2='<td><button class="btn btn-closed" >closed</button></td><td><button class="btn btn-ongoing">'+value.ride_status+'</button></td>';
        var html3='<td><i class="fa fa-star-o"></i></td><td><i class="fa fa-star"></i></td></tr>';
        var htmldata =  html1.concat(html2, html3);
        // console.log(htmldata);
        return htmldata;
    }
    
    function addcoloummaster(){
        $(document).on('click', '.cross', function(){
            var id = $(this).parent().index()+1;
            var col = $("table tr th:nth-child("+id+"), table tr td:nth-child("+id+")");
            var op_text = col[0].innerText;
            var op_id = col[0].id;
            col.hide();
            var htmloption = new Option("option text", op_text);
            $(htmloption).attr('id',op_id);
            /// jquerify the DOM object 'o' so we can use the html method
            $(htmloption).html(op_text);
            // $('#show_coloum').empty();
            $("#show_coloum").append(htmloption);
        }); 
    }