File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Type</th>
            <th>Version</th>
          </tr>
        </thead>
      </table>
    </div>
    <script>
      $(document).ready(function () {
        let thingsTable = $('#example').DataTable({
          "paging": true,
          "searching": true,
          "serverSide": true,
          "searchable": true,
          "ajax": {
            "url": "user/getAllDevice"
          },
          "columns": [
            {'data': 'DeviceType'},
            {'data': 'Version'}
          ],
          "bFilter": true,
          "lengthChange": true
        });
​
        $('#example')
        .on( 'order.dt',  function () { console.log('Order' ); } )
        .on( 'search.dt', function () {console.log('Search' ); } )
        .on( 'page.dt',   function () {console.log("dt table page.dt"); } )
        .dataTable();
​
        $('div.dataTables_filter input').unbind();
        $('div.dataTables_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
              $.ajax({
                url: "user/search"
                }).done(function (result) {
                  console.error("result",result);
                  thingsTable.clear().draw();
                }).fail(function (jqXHR, textStatus, errorThrown) {
              });
          }
        });
      });
    </script>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
router.get('/getAllDevice', async function(req, res, next) {
  const deviceType = req.session.data.deviceType;
  const pageLength = req.query.length;
  const start = req.query.start;
  const searchValue = req.query.search.value;
​
  const totalDeviceCount = await getTotalDeviceNumber(deviceType);
  const deviceList = await getDeviceListWithPaging(pageLength,start,deviceType);
  
  let data = {
    "draw": count,
    "recordsTotal": totalDeviceCount,
    "recordsFiltered": totalDeviceCount,
    "data": deviceList,
    "paging": true,
    "pageLength": pageLength,
  };
  res.send(data);
});
​
router.get('/search', async function(req, res, next) {
  let deviceList = [];
  let device = await dbHelper.getDevicesWithSearch();
  deviceList.push(device);
  let data = {
    "draw": 1,
    "recordsTotal": 1,
    "recordsFiltered": 1,
    "data": deviceList,
    "paging": true,
    "pageLength": 10,
  };
  res.send(data);
});
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers