#53 added multi selection, added selection of all items

This commit is contained in:
Nightblade73 2019-03-20 16:48:55 +04:00
parent 5dc54dda8b
commit 1364e8e84d
2 changed files with 38 additions and 13 deletions

View File

@ -1,10 +1,15 @@
$(document).ready(function () { $(document).ready(function () {
$('#table_id').dataTable({ $('#table_id').DataTable({
"pageLength": 10, "pageLength": 10,
select: { select: {
style: 'multi' style: 'multi'
}, },
"lengthChange": false, "lengthChange": false,
dom: 'Bfrtip',
buttons: [
'selectAll',
'selectNone'
],
language: { language: {
"processing": "Подождите...", "processing": "Подождите...",
"search": "Поиск:", "search": "Поиск:",
@ -25,11 +30,31 @@ $(document).ready(function () {
"aria": { "aria": {
"sortAscending": ": активировать для сортировки столбца по возрастанию", "sortAscending": ": активировать для сортировки столбца по возрастанию",
"sortDescending": ": активировать для сортировки столбца по убыванию" "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() { var table = $('#table_id').DataTable();
window.location = $(this).attr('data-href');
$('#table_id tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
}); });
// $('tbody tr[data-href]').addClass('clickable').click( function() {
// window.location = $(this).attr('data-href');
// });
}); });

View File

@ -3,18 +3,15 @@
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="default"> layout:decorator="default">
<head> <head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.css"/> <link rel="stylesheet" type="text/css"
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/datatables.min.js"></script> 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> </head>
<body> <body>
<div layout:fragment="content"> <div layout:fragment="content">
<a href="./conference" style="
top: 100px;
position: absolute;
width: 100px;
height: 50px;
">нажать</a>
<section id="conference"> <section id="conference">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
@ -29,6 +26,7 @@
<table id="table_id" class="table table-bordered table-hover dataTable"> <table id="table_id" class="table table-bordered table-hover dataTable">
<thead> <thead>
<tr> <tr>
<th></th>
<th>Название:</th> <th>Название:</th>
<th>Описание:</th> <th>Описание:</th>
<th>Начало:</th> <th>Начало:</th>
@ -37,6 +35,7 @@
</thead> </thead>
<tbody> <tbody>
<tr data-href="./conference"> <tr data-href="./conference">
<td></td>
<td>Конференция 1</td> <td>Конференция 1</td>
<td>Описание 1</td> <td>Описание 1</td>
<td>01.01.2000</td> <td>01.01.2000</td>
@ -44,6 +43,7 @@
</tr> </tr>
<tr data-href="./conference"> <tr data-href="./conference">
<td></td>
<td>Конференция 2</td> <td>Конференция 2</td>
<td>Описание 2</td> <td>Описание 2</td>
<td>01.02.2001</td> <td>01.02.2001</td>