datatables_basic.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # Basic datatables
  4. *
  5. * Demo JS code for datatable_basic.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var DatatableBasic = function() {
  11. //
  12. // Setup module components
  13. //
  14. // Basic Datatable examples
  15. var _componentDatatableBasic = function() {
  16. if (!$().DataTable) {
  17. console.warn('Warning - datatables.min.js is not loaded.');
  18. return;
  19. }
  20. // Setting datatable defaults
  21. $.extend( $.fn.dataTable.defaults, {
  22. autoWidth: false,
  23. responsive: true,
  24. columnDefs: [{
  25. orderable: false,
  26. width: 100
  27. }],
  28. dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
  29. language: {
  30. search: '<span>Filter:</span> _INPUT_',
  31. searchPlaceholder: 'Type to filter...',
  32. lengthMenu: '<span>Show:</span> _MENU_',
  33. paginate: { 'first': 'First', 'last': 'Last', 'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;' }
  34. }
  35. });
  36. // Basic datatable
  37. $('.datatable-basic').DataTable();
  38. // Alternative pagination
  39. $('.datatable-pagination').DataTable({
  40. pagingType: "simple",
  41. language: {
  42. paginate: {'next': $('html').attr('dir') == 'rtl' ? 'Next &larr;' : 'Next &rarr;', 'previous': $('html').attr('dir') == 'rtl' ? '&rarr; Prev' : '&larr; Prev'}
  43. }
  44. });
  45. // Datatable with saving state
  46. $('.datatable-save-state').DataTable({
  47. stateSave: true
  48. });
  49. // Scrollable datatable
  50. var table = $('.datatable-scroll-y').DataTable({
  51. autoWidth: true,
  52. scrollY: 300
  53. });
  54. // Resize scrollable table when sidebar width changes
  55. $('.sidebar-control').on('click', function() {
  56. table.columns.adjust().draw();
  57. });
  58. };
  59. // Select2 for length menu styling
  60. var _componentSelect2 = function() {
  61. if (!$().select2) {
  62. console.warn('Warning - select2.min.js is not loaded.');
  63. return;
  64. }
  65. // Initialize
  66. $('.dataTables_length select').select2({
  67. minimumResultsForSearch: Infinity,
  68. dropdownAutoWidth: true,
  69. width: 'auto'
  70. });
  71. };
  72. //
  73. // Return objects assigned to module
  74. //
  75. return {
  76. init: function() {
  77. _componentDatatableBasic();
  78. _componentSelect2();
  79. }
  80. }
  81. }();
  82. // Initialize module
  83. // ------------------------------
  84. document.addEventListener('DOMContentLoaded', function() {
  85. DatatableBasic.init();
  86. });