File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/date-1.0.3/sb-1.0.1/r-2.2.7/datatables.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="https://cdn.datatables.net/v/dt/dt-1.10.24/date-1.0.3/sb-1.0.1/r-2.2.7/datatables.min.js"></script>
  <script src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.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>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>18.05.2021</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>15.05.2021</td>
            <td>$5,300</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
const language = {
    url: '//cdn.datatables.net/plug-ins/1.10.24/i18n/German.json',
    searchBuilder: {
        add: 'Hinzufügen',
        condition: 'Komperator',
        conditions: {
            array: {
                contains: 'Enthält',
                empty: 'Leer',
                equals: 'Gleich',
                not: 'Nicht',
                notEmpty: 'Nicht gleich',
                without: 'Ohne'
            },
            date: {
                after: 'Danach',
                before: 'Davor',
                between: 'Zwischen',
                empty: 'Leer',
                equals: 'Gleich',
                not: 'Nicht',
                notBetween: 'Nicht zwischen',
                notEmpty: 'Nicht leer'
            },
            number: {
                between: 'Zwischen',
                empty: 'Leer',
                equals: 'Gleich',
                gt: 'Größer als',
                gte: 'Größer gleich als',
                lt: 'Kleiner als',
                lte: 'Kleiner gleich als',
                not: 'Nicht',
                notBetween: 'Nicht zwischen',
                notEmpty: 'Nicht leer',
            },
            string: {
                contains: 'Enthält',
                empty: 'Leer',
                endsWith: 'Endet mit',
                equals: 'Gleich',
                not: 'Nicht',
                notEmpty: 'Nicht leer',
                startsWith: 'Startet mit',
            }
        },
        clearAll: 'Zurücksetzen',
        deleteTitle: 'Löschen',
        data: 'Spalte',
        leftTitle: 'Links',
        logicAnd: 'Und',
        logicOr: 'Oder',
        rightTitle: 'Rechts',
        title: {
            0: 'Filter',
            _: 'Filter (%d)'
        },
        value: 'Optionen',
        valueJoiner: 'und'
    }
};
​
$(() => {
    $.fn.dataTable.moment('DD.MM.YYYY');
​
    $("#example").DataTable({
        paging: true,
        scrollY: 500,
        responsive: true,
        dom: 'Qlfrtip',
        columnDefs: [
            {type: 'moment', targets: 4}
        ],
        language
    });
});
10 errors 2 warnings
Line 1: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 63: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 63: Unmatched '{'.
Line 75: Expected ':' and instead saw '}'.
Line 75: Expected an identifier and instead saw ')'.
Line 75: Expected '}' to match '{' from line 66 and instead saw ';'.
Line 76: Expected ')' and instead saw '}'.
Line 76: Missing semicolon.
Line 76: Expected an identifier and instead saw ')'.
Line 76: Expected an assignment or function call and instead saw an expression.
Line 76: Expected ')' and instead saw ''.
Line 76: Missing semicolon.
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers