backup Laravel + datatable 舊代碼

    <div class="d-flex justify-content-between">
      <div>
        <div class="kt-datatable__pager-search row">
          <div class="input">
            <input type="text" class="form-control" placeholder="{{__('Search')}}..." id="kt_datatable_search_query">
          </div>
        </div>      
      </div>

      <div class="me-4 my-1"> 
        <select id="kt_filter_status" name="orders" data-control="select2" data-hide-search="true" class="w-125px form-select form-select-solid form-select-sm">
          <option value="" selected="selected">所有狀態</option>
          @foreach (config('common_arr.arr_status') as $k => $item)
          <option value="{{$k}}">{{$item}}</option>
          @endforeach
        </select>
      </div>  
    </div>

<script>

var keyword='';

var table = $(".kt_datatable").DataTable(
  {
    deferRender: true,  
    lengthMenu: [ 15, 25, 50, 75, 100 ],
    processing: true,
    serverSide: true,
    searching: true,
    ordering: true,
    order: [0, 'desc'],
    language: {          
      url: 'https://cdn.datatables.net/plug-ins/1.10.22/i18n/Chinese-traditional.json'
    },
    ajax: '{{ route("admin.sme.ajax") }}',        
    columns: [
      {data: 'id', name: 'id'},
      { data: 'name', name: 'name',orderable: false  },
      { data: 'name_en', name: 'name_en',orderable: false  },
      { data:'user.name', render: function (data, type, row) {return row.user ? row.user.name  : '';}, searchable: true,orderable: false },
      {
      data: 'created_at', 
      name: 'created_at',
      render: function (data, type, row) {
        if (row.created_at !== null) {
          return moment(data).format('YYYY-MM-DD');
        } else {
          return '';
        }
      },
      searchable: false
      },  
      {
        data: 'updated_at', 
        name: 'updated_at',
        render: function (data, type, row) {
          if (row.updated_at !== null) {
            return moment(data).format('YYYY-MM-DD') + " <br>(" + moment(data).fromNow() + ")";
          } else {
            return '';
          }
        },
        searchable: false
      },
      {data: null, name: 'action', 
        render: function (data, type, row) {
          var editButton = '<a href="{{ route('admin.sme.index') }}/' + row.id + '/edit" class="btn px-2 py-1 fs-8 btn-primary">{{ __('修改') }}</a>';
          return editButton ;
        }, 
        orderable: false, 
        searchable: false
      }
    ],
    createdRow: function(row, data, dataIndex) {
        $(row).addClass('align-middle');
        $(row).find('td').each(function() {
          var keyword = $('#kt_datatable_search_query').val();
          var content = $(this).text();
          if ($(this).html() == content) {
            // 如果內容不包含 HTML 元素
            if (keyword.length > 0) {
              var regex = new RegExp('(' + keyword + ')', 'gi');
              var newContent = content.replace(regex, '<b style="color:#FF3355">$1</b>');
              $(this).html(newContent);
            }
          } else {
            // 如果內容包含 HTML 元素
            var $html = $('<div>').html($(this).html());
            $html.find('*').contents().filter(function() {
              return this.nodeType === 3;
            }).each(function() {
              var text = $(this).text();
              if (text.length > 0) {
                var regex = new RegExp('(' + keyword + ')', 'gi');
                var newText = text.replace(regex, '<b style="color:#FF3355">$1</b>');
                $(this).replaceWith(newText);
              }
            });
            $(this).html($html.html());
          }
        });

        $(row).attr('data-href', '{{route('admin.sme.index')}}/' + data.id + '/edit')
          .css('cursor', 'pointer')
          .on('click', function() {
            window.location = $(this).data('href');
          })
          .hover(
            function() {
              $(this).addClass('bg-light');
            },
            function() {
              $(this).removeClass('bg-light');
            }
          );
        }

  }
);

$('#kt_datatable_search_query').keyup(function(){
  keyword = $(this).val();
  table.search(keyword).draw();
});
$('#kt_filter_status').change(function(){
  var status = $(this).val();
  table.column(1).search(status).draw();
});
</script>

    public function ajax(Request $request) {

        $data = ORM::select('id', 'name', 'name_en', 'user_id', 'created_at', 'updated_at')
            ->with('user');
        return datatables($data)
            ->toJson();
    }

just backup

以上代碼可執行，但存在了效能漏洞，datatable 的過濾及搜尋都是基於了所有數據，在頁面中再過濾，而不是把搜尋及過濾的內容發送去數據庫進行過濾