datatable search

by KANDR101

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.debug.js"></script>
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap4.min.css" /> 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>    
<script...

JavaScript

$(function() {
/*   _.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g,
    evaluate: /<%([\s\S]+?)%>/g,
    escape: /<%-([\s\S]+?)%>/g,
   };*/

  var vm = new viewModel();
  ko.applyBindings(vm);

});

ko.bindingHandlers.datatable = {
  init: ko.bindingHandlers.template.init,
  update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    let $bind = ko.unwrap(valueAccessor()),
        $tbl = ko.unwrap($bind.data),
        $api = false;

    let apiUpdate = function(rows) {
      let cols = $tbl.columns;

      if (rows === false)
        $tbl.rows.subscribe(apiUpdate);

      if ($api)
        $api.destroy()

      ko.bindingHandlers.template.update(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);

      if (_.isFunction(cols) && !_.isEmpty(cols.peek()))
        $api = $(element).find("table").dataTable($tbl.config).api();
    }

    apiUpdate(false);

  }
};

function viewModel() {
  var self = this;

  self.table = {
    attr: {
      id: 'vehicleSearchGrid',
      class: 'table table-striped table-bordered dt-responsive table-sm w-100',
    },
    config: {
      // dom: "<'rows'<'col-sm-12s't>><'row'<'col-auto mx-auto col-md mx-md-0'i><'col-auto mx-auto col-md mx-md-0'p>>",
      deferRender: true,
      paging: true,
      pageLength: 3,
      language: {
        lengthMenu: '<span class="small">' +
        '<select class="custom-select custom-select-sm form-control form-control-sm">' +
        '<option value="3">3 rows</option>' +
        '<option value="10">10 rows</option>' +
        '<option value="25">25 rows</option>' +
        '<option value="-1">All rows</option>' +
        '</select>' +
        '</span>',
        paginate: {
          first: '<i class="fas fa-angle-double-left"></i>',
          previous: '<i class="fas fa-angle-left"></i>',
          next: '<i class="fas fa-angle-right"></i>',
          last: '<i class="fas fa-angle-double-right"></i>',
        },
      },
     ...