File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.24/sl-1.3.3/datatables.min.css"
    />
​
    <script
      type="text/javascript"
      src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.24/sl-1.3.3/datatables.min.js"
    ></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
    <table
      id="my-table"
      class="table table-striped table-hover mt-5"
      style="width: 100%;"
    >
      <thead>
        <tr>
          <th></th>
          <th>ID</th>
          <th>Source</th>
          <th>Target</th>
        </tr>
      </thead>
    </table>
​
    </div>
  </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 () {
  
  var data = {
  "data": [
    {
      "segment_id": 944,
      "id": 1,
      "source": "This news is about Star Wars.",
      "target": "",
      "status": 0
    },
    {
      "segment_id": 34,
      "id": 2,
      "source": "Are you a fan?",
      "target": "",
      "status": 0
    },
    {
      "segment_id": 35,
      "id": 3,
      "source": "People make a big Star Wars model.",
      "target": "",
      "status": 1
    },
    {
      "segment_id": 36,
      "id": 4,
      "source": "You can see it in England.",
      "target": "",
      "status": 0
    },
    {
      "segment_id": 37,
      "id": 5,
      "source": "The model is made from Legos.",
      "target": "",
      "status": 0
    }
  ]
};
​
      const datatableOptions = {
        scrollY: "400px",
        scrollCollapse: true,
        paging: false,
        
        select: {
          style: "multi",
          selector: "td:first-child"
        }
      };
​
      var table = $("#my-table").DataTable({
        //ajax: 'https://vvr2h.csb.app/public/myjson.json',
        data: data.data,
        order: [[1, 'asc']],
        columns: [
          { data: null, defaultContent: "" },
          { data: "id" },
          { data: "source" },
          { data: "target" }
        ],
        columnDefs: [
          {
            className: "select-checkbox align-middle",
            targets: 0,
            orderable: false
          },
          {
            targets: 1,
            className: "align-middle"
          },
          {
            targets: 2,
            className: "align-middle",
            orderable: false
          },
          {
            targets: 3,
            className: "align-middle",
            orderable: false
          }
        ],
        ...datatableOptions
      });
} );
​
4 errors 1 warning
Line 43: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 85: Expected '}' to match '{' from line 54 and instead saw '...'.
Line 85: Expected ')' and instead saw 'datatableOptions'.
Line 85: Missing semicolon.
Line 87: Expected '(end)' and instead saw '}'.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers