DataTables Options settings

datatables_options_settings.html

<!-- Write to the head of your html file. -->
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/r-2.2.3/datatables.min.css"/>

<!-- Write it in the body of your html file. -->

<!-- Table -->
<table id="myTable2">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

<table id="myTable3" class="display nowrap cell-border" width="100%">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

<table id="myTable4" class="display nowrap" width="100%">
    <thead>
        ...
    </thead>
    <tbody>
        ...
    </tbody>
</table>

<!-- Write in the footer of your html file. -->
<!-- remember to include jQuery as well -->
<script src="https://cdn.datatables.net/v/dt/dt-1.10.20/r-2.2.3/datatables.min.js"></script>
<script>
$(function () {
  $("#myTable2").DataTable({
    language: {
      url: "//cdn.datatables.net/plug-ins/1.10.20/i18n/Japanese.json"
    }
  });
  $("#myTable3").DataTable({
    responsive: true,
    lengthChange: false,
    searching: false,
    paging: false,
    language: {
      sInfo: "Data _TOTAL_ 件中 _START_ 件から _END_ 件まで表示"
    }
  });
  $("#myTable4").dataTable({
    responsive: {
      details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate,
        type: "none",
        target: ""
      }
    },
    lengthChange: false,
    paging: false,
    language: {
      sInfo: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
      sSearch: "검색:"
    }
  })
});
</script>