【问题标题】:why does live search in Ajax Datatables is not working in my code?为什么 Ajax Datatables 中的实时搜索在我的代码中不起作用?
【发布时间】:2019-04-29 07:42:50
【问题描述】:

我尝试在我的代码中实现 ajax 数据表,它工作正常,但是当我尝试在我的表中实现实时搜索时它不工作 当我查看检查元素-> 网络时,ajax 正在工作,但它没有根据我的搜索过滤数据,请帮我找到解决方案

这是我的控制器代码:

function ums_permission_datatable_ajax(){   
        // Datatables Variables
        $draw = intval($this->input->post("draw"));
        $start = intval($this->input->post("start"));
        $length = intval($this->input->post("length"));
                $search = $this->input->post("search");
        $order = $this->input->post("order");

        $col = 0;
        $dir = "";
        if(!empty($order)) {
            foreach($order as $o) {
                $col = $o['column'];
                $dir= $o['dir'];
            }
        }
        if($dir != "asc" && $dir != "desc") {
            $dir = "asc";
        }
        $columns_valid = array(
            "ums_permissions.name", 
            "ums_permissions.function", 
            "ums_permissions.display", 
            "ums_permissions.description", 
            "ums_permissions.system",
        );
        if(!isset($columns_valid[$col])) {
            $order = null;
        } else {
            $order = $columns_valid[$col];
        }
        $orderby[$order] = $dir;

        $total_records = $this->Ums_permissions_model->count();
        //echo '<pre>';print_r($orderby);die;
        $ums_permissions = $this->Ums_permissions_model->retrieve(array(), $length, $start, $orderby);
        //echo $this->db->last_query();die;
        $data = array();
        foreach($ums_permissions as $row) {
            $data[] = array(
                $row->name,                   
                $row->function,             
                $row->display,
                $row->description,
                $row->system,  
                "<a data-toggle='tooltip' data-placement='top' title='Edit' href='".site_url('ums_permissions/add_edit/').$row->id."' class='btn btn-white btn-sm'><i class='fa fa-pencil-square-o fa-fw'></i></a>
                <a data-toggle='tooltip' href='#'  title='Delete' class='btn btn-white btn-sm' role='button' id='delete_wpa_death1' data-deleteid='$row->id'><i class='fa fa-trash fa-fw'></i></a>",
            );
        }
        $output = array("draw" => $draw,"recordsTotal" => $total_records,"recordsFiltered" => $total_records,"data" => $data);  
        echo json_encode($output);
        exit();
    }

这是我的 Js 代码:

$(document).ready(function() {
                    $("#dataTables").on("preInit.dt", function(){

                     $("#dataTables_wrapper input[type='search']").after("<button type='button' id='btnexample_search'></button>");
                   });                  
            $.fn.dataTable.moment('DD/MM/YYYY');  
            $('.dataTables').dataTable({
                iDisplayLength: 50,
                "initComplete":function(){onint();},
                "processing": true,
                "serverSide": true,
                "ajax": {
                    url : "<?php echo site_url("ums_permissions/ums_permission_datatable_ajax") ?>",
                    type : 'POST',
                    "data": function(d) {
                       var frm_data = $('form').serializeArray();
                       $.each(frm_data, function(key, val) {
                         d[val.name] = val.value;
                       });
                       var searchValue = d.search.value;
                       return d;
                     }
                },
            }); 
        });
        function onint(){  
         // take off all events from the searchfield
         $("#dataTables_wrapper input[type='search']").off();
         // Use return key to trigger search
         $("#dataTables_wrapper input[type='search']").on("keydown", function(evt){
              if(evt.keyCode == 13){
                $("#dataTables").DataTable().search($("input[type='search']").val()).draw();
              }
         });
         $("#btnexample_search").button().on("click", function(){
               $("#dataTables").DataTable().search($("input[type='search']").val()).draw();

         });
       }

【问题讨论】:

  • 你已经定义了$search = $this-&gt;input-&gt;post("search");,但是你什么也没做
  • 是的,一开始我想用sql查询手动过滤,但是当表有大量数据时效果不佳,所以我决定在服务器端进行过滤,它不起作用

标签: javascript php ajax codeigniter datatables


【解决方案1】:

您必须在服务器端进行所有搜索和过滤。 对于搜索/过滤器或页面的每个请求,数据表将所有这些作为表单数据传递给服务器页面。参考https://www.datatables.net/manual/server-side 您将不得不使用此表单数据对 sql 表上的记录进行过滤/搜索/分页并将其相应地传递给客户端。 数据表仅显示它从服务器获取的内容。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2023-02-05
    • 2014-09-06
    • 1970-01-01
    • 2015-10-14
    • 2020-11-25
    • 2021-03-17
    • 2018-04-24
    • 2019-01-07
    相关资源
    最近更新 更多