javascript - How to get multiple selected values of select2 filter from datatable php serverside

View Original

one text

I want to be able to display multiple filtering/sorting select2 from datatable and ajax php.

I have ajax.php source code, and index.php source code.

This is result table based on the code above

The Result When I fltering/sorting single data with dropdown, it??�s works.

But, When I filtering/sorting with multiple select2 still doesn??�t work. Data not showing.

Is there something wrong with my code? or is there a script I should add ? Please Help me, and Thank you very much!

Index.php

// Index.php
<!DOCTYPE html>
<html>

<head>
  <title>Data - Issued</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.full.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
  <link rel="stylesheet" href="https://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.0.9.2.css" />

</head>

<body class="hold-transition skin-blue sidebar-mini  fixed">
  <div class="wrapper">
    <table class="table" style="width: 100%; font-size: 10px; margin: 20px;" class="form-horizontal" role="form">
      <tr style="text-align: left;">
        <td>
          <div class="form-group">
            <label>Name</label>
            <div class="input-group">
              <select id="searchByNama" name="searchByNama[]" class="form-control form-control-sm select2" multiple="multiple">
                <option value="Beni">Beni</option>
                <option value="Chandra">Chandra</option>
                <option value="Daniel">Daniel</option>
              </select>
            </div>
          </div>
        </td>
      </tr>
      <tr style="text-align: left;">
        <td>
          <div class="form-group">
            <label>Number</label>
            <div class="input-group">
              <select class="form-control select2" id="searchByHp">
                <option selected="selected" disabled value="">Please select one</option>
                <option value="021">021</option>
                <option value="0838">0838</option>
                <option value="0822">0822</option>
              </select>
            </div>
          </div>
        </td>
      </tr>
    </table>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" id="contentBody">
      <section class="content container-fluid">
        <div id="buyerPO" data-first="true" data-col-number="" data-col-name="" data-fixed="false" data-fixed2="true"></div>
        <div class="box">
          <div class="box-body dhg-content-list">
            <div style="padding-left: 10px; padding-right: 10px;">
              <table id="buyerPOList" class="table table-bordered table-hover display" style="width: 100%; font-size: 10px; white-space: nowrap; margin: auto;">
                <thead>
                  <tr>
                    <th>No</th>
                    <th>Name</th>
                    <th>Number</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <script type="text/javascript">
              $(document).ready(function() {
                const url = 'ajax.php';
                const oTable = $('#buyerPOList').DataTable({

                  processing: true,
                  serverSide: true,
                  multiple: true,
                  orderable: false,
                  searchable: false,

                  ajax: {
                    url: url,
                    type: 'POST',
                    data: function(data) {
                      // Read values
                      var nama = $("#searchByNama").val();
                      var hp = $("#searchByHp").val();

                      // Append to data
                      data.searchByNama = nama;
                      data.searchByHp = hp;
                    }
                  },
                  columns: [{
                      data: "id"
                    },
                    {
                      data: "nama"
                    },
                    {
                      data: "no_hp"
                    },
                    {
                      data: "id",
                      "render": function(data, type, row) {
                        return "<a href='#' class='btn-warning btn-sm'>Edit</a>&nbsp; <a href='#' class='btn-danger btn-sm'>Delete</a>"
                      }
                    }
                  ],
                });
                $('#searchByHp').change(function() {
                  oTable.draw();
                });

                $('#searchByNama').change(function() {
                  oTable.draw();
                });
              });
            </script>
          </div>
        </div>
      </section>

    </div>
  </div>
  <script>
    $(document).ready(function() {
      $('.select2').select2()
      $(document).on('collapsed.pushMenu expanded.pushMenu', function() {
        hamburger()
      });
    });

    var AdminLTEOptions = {
      controlSidebarOptions: {
        slide: false,
      }
    };

    function hamburger() {
      var hamburger = readCookie("hamburger");

      if (hamburger == null) {
        createCookie('hamburger', 'sidebar-collapse', 99999)
        $('body').addClass('sidebar-collapse');
      } else {
        eraseCookie('hamburger');
      }
    }
  </script>
</body>

</html>

Source