File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.4/date-1.1.1/fc-4.0.0/fh-3.2.0/r-2.2.9/rg-1.1.3/sc-2.0.5/sb-1.2.2/sp-1.4.0/sl-1.3.3/datatables.min.css"/>
        
    <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>Name</th>
            <th>Start date</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Start date</th>
          </tr>
        </tfoot>
​
      </table>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.0.2/luxon.min.js" integrity="sha512-frUCURIeB0OKMPgmDEwT3rC4NH2a4gn06N3Iw6T1z0WfrQZd7gNfJFbHrNsZP38PVXOp6nUiFtBqVvmCj+ARhw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.11.3/b-2.0.1/b-colvis-2.0.1/b-html5-2.0.1/b-print-2.0.1/cr-1.5.4/date-1.1.1/fc-4.0.0/fh-3.2.0/r-2.2.9/rg-1.1.3/sc-2.0.5/sb-1.2.2/sp-1.4.0/sl-1.3.3/datatables.min.js"></script>
    <!-- <script type="text/javascript" src="https://debug.datatables.net/bookmarklet/DT_Debug.js"></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
 
$(document).ready( function () {
  const luxonFormat = "MM/dd/yyyy hh:mm:ss a";
  const momentFormat = "MM/DD/YYYY hh:mm:ss ZZ";
  
  var table = $('#example').DataTable({
    dom: "QBfrtip",
    serverSide: true,
    ajax: function(data, cb, cfg) {
      console.log("Ajax Request Data:", data);
      cb({
        draw: data.draw,
        recordsTotal: 1,
        recordsFiltered: 1,
        data: [
        {
          name: "Anise",
          date: "1635803053"
        }
      ],
      });
    },
    buttons: {
      buttons: [
        {
          text: 'Reload',
          action(e, dt, node, config) {
            dt.ajax.reload();
          }
        }
      ]
    },
    columns: [
      {
        data: "name"
      },
      {
        data: "date",
        searchBuilderType: `luxon-${luxonFormat}`,
        searchBuilder: {
          orthogonal: {
            filter: 'filter',
            display: 'display'
          }
        },
        render(data, type, row, meta) {
                    let value = data;
                    switch (type) {
                    case "display":
                    {
                        if (data) {
                            const epoch = parseInt(data, 10);
                            if (!isNaN(epoch)) {
                                const datetime = luxon.DateTime.fromSeconds(epoch);
                                value = datetime.toFormat(luxonFormat);
                            }
                        }
                        break;
                    }
                    case "filter":
                    {
                      if (data) {
                        const epoch = parseInt(data, 10);
                        if (!isNaN(epoch)) {
                          const datetime = luxon.DateTime.fromMillis(epoch);
                          value = datetime;
                        }
                      }
                      break;
                    }
                    default:
                    {
                        break;
                    }
                    }
                    return value;
                }
      }
    ],
  });
} );
​
14 errors 12 warnings
Line 2: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 3: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 26: 'concise methods' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 38: Unexpected '`'.
Line 39: Expected '}' to match '{' from line 36 and instead saw ':'.
Line 39: Expected ']' to match '[' from line 32 and instead saw '{'.
Line 40: Expected '}' to match '{' from line 5 and instead saw 'orthogonal'.
Line 40: Expected ')' and instead saw ':'.
Line 40: Missing semicolon.
Line 41: Label 'filter' on filter statement.
Line 42: Expected an assignment or function call and instead saw an expression.
Line 42: Missing semicolon.
Line 42: Expected '}' to match '{' from line 40 and instead saw ':'.
Line 42: Expected an assignment or function call and instead saw an expression.
Line 42: Missing semicolon.
Line 44: Expected ')' and instead saw '}'.
Line 45: Expected an assignment or function call and instead saw an expression.
Line 45: Missing semicolon.
Line 46: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 51: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 53: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 62: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 62: const 'epoch' has already been declared.
Line 64: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 64: const 'datetime' has already been declared.
Line 77: Expected '(end)' and instead saw '}'.
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers