#53 added multi selection, added selection of all items

5 years ago · 1364e8e84d
parent 5dc54dda8b
commit 1364e8e84d
2 changed files with 38 additions and 13 deletions
--- a/src/main/resources/public/js/conference.js
+++ b/src/main/resources/public/js/conference.js
@ -1,10 +1,15 @@
 $(document).ready(function () {
-    $('#table_id').dataTable({
+    $('#table_id').DataTable({
    "pageLength": 10,
    select: {
            style: 'multi'
        },
    "lengthChange": false,
+    dom: 'Bfrtip',
+    buttons: [
+                'selectAll',
+                'selectNone'
+            ],
    language: {
          "processing": "Подождите...",
          "search": "Поиск:",
@ -25,11 +30,31 @@ $(document).ready(function () {
          "aria": {
            "sortAscending": ": активировать для сортировки столбца по возрастанию",
            "sortDescending": ": активировать для сортировки столбца по убыванию"
-          }
-        }
+          },
+          "buttons": {
+                      "selectAll": "Выбрать всё",
+                      "selectNone": "Убрать выделение"
+                  }
+        },
+    columnDefs: [ {
+        orderable: false,
+        className: 'select-checkbox',
+        targets:   0
+    } ],
+    select: {
+        style:    'multi'
+    },
+    order: [[ 1, 'asc' ]]
    });

-    $('tbody tr[data-href]').addClass('clickable').click( function() {
-        window.location = $(this).attr('data-href');
+    var table = $('#table_id').DataTable();
+
+    $('#table_id tbody').on( 'click', 'tr', function () {
+        $(this).toggleClass('selected');
    });
+
+
+//    $('tbody tr[data-href]').addClass('clickable').click( function() {
+//        window.location = $(this).attr('data-href');
+//    });
 });
--- a/src/main/resources/templates/conferences/conferences.html
+++ b/src/main/resources/templates/conferences/conferences.html
@ -3,18 +3,15 @@
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="default">
 <head>
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/>
-    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script>
+    <link rel="stylesheet" type="text/css"
+          href="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sl-1.3.0/datatables.min.css"/>
+
+    <script type="text/javascript"
+            src="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sl-1.3.0/datatables.min.js"></script>
 </head>

 <body>
 <div layout:fragment="content">
-    <a href="./conference" style="
-    top: 100px;
-    position: absolute;
-    width: 100px;
-    height: 50px;
-">нажать</a>
    <section id="conference">
        <div class="container">
            <div class="row">
@ -29,6 +26,7 @@
                        <table id="table_id" class="table table-bordered table-hover dataTable">
                            <thead>
                            <tr>
+                                <th></th>
                                <th>Название:</th>
                                <th>Описание:</th>
                                <th>Начало:</th>
@ -37,6 +35,7 @@
                            </thead>
                            <tbody>
                            <tr data-href="./conference">
+                                <td></td>
                                <td>Конференция 1</td>
                                <td>Описание 1</td>
                                <td>01.01.2000</td>
@ -44,6 +43,7 @@

                            </tr>
                            <tr data-href="./conference">
+                                <td></td>
                                <td>Конференция 2</td>
                                <td>Описание 2</td>
                                <td>01.02.2001</td>