JSFiddle - React, Tailwind, and code Playground

by Tadit Dash

HTML

<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<h5 style="text-align:center;margin-bottom:1em">xml dt employees display</h5>
<div class="table-responsive container-fluid" style="width:83%;height:101%">

  <table id="emplys" border="1" class="table display" width="90%" style="border-collapse:collapse;text-align:center">
    <thead>
      <tr>
        <th>Empl Name</th>
        <th>Position</th>
        <th>City's Office</th>
        <th>Phn.Extn</th>
        <th>Hrng. Date</th>
        <th>Annl.Salary</th>
      </tr>
    </thead>
  </table>

JavaScript

$(document).ready(function() {
  var prstbl = $('#emplys').dataTable({
    searching: false,
    info: false,
    "iDisplayLength": 5,
    lengthMenu: [1, 5, 10],
    initComplete: function() {
      this.api().columns([1,2]).every(function() {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.header()))
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>')
        });
      });
      /* this.api().columns([1, 2]).every(function() {
      debugger;
        var column = this;
        var select = $('<select><option value=""></option></select>').appendTo($(column.header()).empty()).on('change', function() {
          var val = $.fn.dataTable.util.escapeRegex($(this).val())
          column.search(val ? '^' + val + '$' : '', true, false).draw()
        })
        column.data().unique().sort().each(function(d, j) {
          if (this.search() === '^' + d + '$')
            select.append('<option value="' + d + '" selected="selected">' + d + '</option>')
          else
            select.append('<option value="' + d + '">' + d + '</option>')
        })
      }) */
    },
    columns: [{
      data: "EMPNME"
    }, {
      data: "POSN"
    }, {
      data: "CITY"
    }, {
      data: "EXTN"
    }, {
      data: "HRNGDTE"
    }, {
      data: "SLRYPYEAR"
    }]
  })

  var xml = '<?xml version="1.0" encoding="UTF-8"?><emplyees><emplyee><empNme>Cedric Kelly</empNme><posn>Senior js Developer</posn><city>Edinburgh</city><extn>6224</extn><hrngDte>2012/03/29</hrngDte><SlryPYear>$433,060</SlryPYear></emplyee><emplyee><empNme>Brielle Williamson</empNme><posn>Integration...