24.02.2017, 15:18
|
 |
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 80
|
|
Без скрипта таблицы http://cdn.datatables.net/1.10.13/js...aTables.min.js работает ваш код -я в курсе. В том то и дело. Потестите мой срощеный код -наблюдается задержка в некоторых браузерах(IE особенно),некорректныое отображения теста шапки.
Последний раз редактировалось JAMLIGHT, 24.02.2017 в 15:20.
|
|
24.02.2017, 15:27
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Ну а скрипт и я вместе с ним причем? Значит что-то мешает его работе, да и вообще, почитайте о методах этого плагина, может и не надо костылей внешних, а все есть в нем.
|
Сообщение от JAMLIGHT
|
|
некорректныое отображения теста шапки.
|
У вас вообще таблица, это нечто, в смысле верстки, подключать плагины и тестировать пока недосуг мне, а тем более в IE, отладчик не работает. |
|
24.02.2017, 15:32
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 80
|
|
|
Ошибку нашёл -раскрываемые строки должны быть показаны филmтром количества показанных строк таблицы-функция этой таблицы Datatable
Последний раз редактировалось JAMLIGHT, 24.02.2017 в 16:08.
|
|
24.02.2017, 17:07
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от JAMLIGHT
|
|
раскрываемые строки должны быть показаны филmтром количества показанных строк таблицы-функция этой таблицы Datatable
|
Я тоже нашел ошибку - где-то тут не хватает запятой.  |
|
24.02.2017, 18:17
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 80
|
|
Если кому надо вот выкладываю рабочий код со срощенным скриптом предложенном в этом посте с DataTable без ограничений по количеству показов.Всем спасибо
<head>
<title>HTML код таблицы</title>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
function show_hide(_class) {
var tr = document.querySelectorAll(_class);
for (var i = 0; i < tr.length; ++i) tr[i].setAttribute('style', tr[i].getAttribute('style') ? "" : "display:none");
}
</script>
<script>
$(document).ready(function() {
$('#myTable').DataTable( {
"paging": false,
"ordering": false,
"info": false
} );
} );
</script>
</head>
<body>
<table border="1" id="myTable" class="display">
<thead>
<tr>
<th colspan="6">
<table><thead><tr>
<td onclick="show_hide('.as1')">Надо развернуть1</td>
<td onclick="show_hide('.as2')">Надо развернуть2</td>
<td onclick="show_hide('.as3')">Надо развернуть3</td>
<td onclick="show_hide('.as4')">Надо развернуть4</td>
<td onclick="show_hide('.as5')">Надо развернуть5</td>
<td onclick="show_hide('.as6')">Надо развернуть6</td>
</tr></thead></table>
</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr class="as1" style="display:none">
<th>Tiger Nixon</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as1" style="display:none">
<th>Tiger Nixon2</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as2" style="display:none">
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as2" style="display:none">
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as3" style="display:none">
<th>Ashton Cox</th>
<th>Junior Technical Author</th>
<th>San Francisco</th>
<th>66</th>
<th>2009/01/12</th>
<th>$86,000</th>
</tr>
<tr class="as3" style="display:none">
<th>Ashton Cox</th>
<th>Senior Javascript Developer</th>
<th>Edinburgh</th>
<th>22</th>
<th>2012/03/29</th>
<th>$433,060</th>
</tr>
<tr class="as3" style="display:none">
<th>Ashton Cox</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
</tr>
<tr class="as4" style="display:none">
<th>Cedric Kelly</th>
<th>Integration Specialist</th>
<th>New York</th>
<th>61</th>
<th>2012/12/02</th>
<th>$372,000</th>
</tr>
<tr class="as4" style="display:none">
<th>Cedric Kelly</th>
<th>Sales Assistant</th>
<th>San Francisco</th>
<th>59</th>
<th>2012/08/06</th>
<th>$137,500</th>
</tr>
<tr class="as5" style="display:none">
<th>Airi Satou</th>
<th>Integration Specialist</th>
<th>Tokyo</th>
<th>55</th>
<th>2010/10/14</th>
<th>$327,900</th>
</tr>
<tr class="as5" style="display:none">
<th>Airi Satou</th>
<th>Javascript Developer</th>
<th>San Francisco</th>
<th>39</th>
<th>2009/09/15</th>
<th>$205,500</th>
</tr>
<tr class="as5" style="display:none">
<th>Airi Satou</th>
<th>Software Engineer</th>
<th>Edinburgh</th>
<th>23</th>
<th>2008/12/13</th>
<th>$103,600</th>
</tr>
<tr class="as6" style="display:none">
<th>Brielle Williamson</th>
<th>Office Manager</th>
<th>London</th>
<th>30</th>
<th>2008/12/19</th>
<th>$90,560</th>
</tr>
<tr class="as1" style="display:none">
<th>Tiger Nixon</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as1" style="display:none">
<th>Tiger Nixon2</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as2" style="display:none">
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as2" style="display:none">
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as3" style="display:none">
<th>Ashton Cox</th>
<th>Junior Technical Author</th>
<th>San Francisco</th>
<th>66</th>
<th>2009/01/12</th>
<th>$86,000</th>
</tr>
<tr class="as3" style="display:none">
<th>Ashton Cox</th>
<th>Senior Javascript Developer</th>
<th>Edinburgh</th>
<th>22</th>
<th>2012/03/29</th>
<th>$433,060</th>
</tr>
<tr class="as3" style="display:none">
<th>Ashton Cox</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
</tr>
<tr class="as4" style="display:none">
<th>Cedric Kelly</th>
<th>Integration Specialist</th>
<th>New York</th>
<th>61</th>
<th>2012/12/02</th>
<th>$372,000</th>
</tr>
<tr class="as4" style="display:none">
<th>Cedric Kelly</th>
<th>Sales Assistant</th>
<th>San Francisco</th>
<th>59</th>
<th>2012/08/06</th>
<th>$137,500</th>
</tr>
<tr class="as5" style="display:none">
<th>Airi Satou</th>
<th>Integration Specialist</th>
<th>Tokyo</th>
<th>55</th>
<th>2010/10/14</th>
<th>$327,900</th>
</tr>
<tr class="as5" style="display:none">
<th>Airi Satou</th>
<th>Javascript Developer</th>
<th>San Francisco</th>
<th>39</th>
<th>2009/09/15</th>
<th>$205,500</th>
</tr>
<tr class="as5" style="display:none">
<th>Airi Satou</th>
<th>Software Engineer</th>
<th>Edinburgh</th>
<th>23</th>
<th>2008/12/13</th>
<th>$103,600</th>
</tr>
<tr class="as6" style="display:none">
<th>Brielle Williamson</th>
<th>Office Manager</th>
<th>London</th>
<th>30</th>
<th>2008/12/19</th>
<th>$90,560</th>
</tr>
</tbody>
</table>
</body>
|
|
24.02.2017, 18:48
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Ну уж коли JQ, то можно его и задействовать, все равно таблицу получает:
$(function() {
$('#myTable').DataTable( {
"paging": false,
"ordering": false,
"info": false
}).find('table').on('click', 'td', function() {
var tr = $(this).closest('#myTable').find('.'+$(this).data('box'))[0];
tr.setAttribute('style', tr.getAttribute('style') ? "" : "display:none");
});
);
А нативные обработчики убрать из таблицы:
<td data-box="as1">Надо развернуть1</td>
<td data-box="as2">Надо развернуть2</td>
<td data-box="as3">Надо развернуть3</td>
<td data-box="as4">Надо развернуть4</td>
<td data-box="as5">Надо развернуть5</td>
<td data-box="as6">Надо развернуть6</td>
|
|
24.02.2017, 19:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
laimas,
идея понятна но код не рабочий ...
|
Сообщение от рони
|
|
найдите разницу пост№2 тут и пост №17 тут
|
|
Сообщение от рони
|
|
$(document).ready(function(){ 2 $('#myTable').DataTable(); 3 4//где код ? 5 });
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myTable tbody tr{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$("#myTable").DataTable({
"paging": false,
"ordering": false,
"info": false
});
$("#myTable").find("[data-box]").on("click", function() {
var cls = "." + $(this).data("box");
$(cls).toggle()
})
});
</script>
</head>
<body>
<table border="1" id="myTable" class="display">
<thead>
<tr>
<th colspan="6">
<table><thead><tr>
<td data-box="as1">Надо развернуть1</td>
<td data-box="as2">Надо развернуть2</td>
<td data-box="as3">Надо развернуть3</td>
<td data-box="as4">Надо развернуть4</td>
<td data-box="as5">Надо развернуть5</td>
<td data-box="as6">Надо развернуть6</td>
</tr></thead></table>
</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr class="as1" >
<th>Tiger Nixon</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as1" >
<th>Tiger Nixon2</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as2" >
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as2" >
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Junior Technical Author</th>
<th>San Francisco</th>
<th>66</th>
<th>2009/01/12</th>
<th>$86,000</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Senior Javascript Developer</th>
<th>Edinburgh</th>
<th>22</th>
<th>2012/03/29</th>
<th>$433,060</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Integration Specialist</th>
<th>New York</th>
<th>61</th>
<th>2012/12/02</th>
<th>$372,000</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Sales Assistant</th>
<th>San Francisco</th>
<th>59</th>
<th>2012/08/06</th>
<th>$137,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Integration Specialist</th>
<th>Tokyo</th>
<th>55</th>
<th>2010/10/14</th>
<th>$327,900</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Javascript Developer</th>
<th>San Francisco</th>
<th>39</th>
<th>2009/09/15</th>
<th>$205,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Software Engineer</th>
<th>Edinburgh</th>
<th>23</th>
<th>2008/12/13</th>
<th>$103,600</th>
</tr>
<tr class="as6" >
<th>Brielle Williamson</th>
<th>Office Manager</th>
<th>London</th>
<th>30</th>
<th>2008/12/19</th>
<th>$90,560</th>
</tr>
<tr class="as1" >
<th>Tiger Nixon</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as1" >
<th>Tiger Nixon2</th>
<th>System Architect</th>
<th>Edinburgh</th>
<th>61</th>
<th>2011/04/25</th>
<th>$320,800</th>
</tr>
<tr class="as2" >
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as2" >
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Junior Technical Author</th>
<th>San Francisco</th>
<th>66</th>
<th>2009/01/12</th>
<th>$86,000</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Senior Javascript Developer</th>
<th>Edinburgh</th>
<th>22</th>
<th>2012/03/29</th>
<th>$433,060</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Integration Specialist</th>
<th>New York</th>
<th>61</th>
<th>2012/12/02</th>
<th>$372,000</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Sales Assistant</th>
<th>San Francisco</th>
<th>59</th>
<th>2012/08/06</th>
<th>$137,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Integration Specialist</th>
<th>Tokyo</th>
<th>55</th>
<th>2010/10/14</th>
<th>$327,900</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Javascript Developer</th>
<th>San Francisco</th>
<th>39</th>
<th>2009/09/15</th>
<th>$205,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Software Engineer</th>
<th>Edinburgh</th>
<th>23</th>
<th>2008/12/13</th>
<th>$103,600</th>
</tr>
<tr class="as6" >
<th>Brielle Williamson</th>
<th>Office Manager</th>
<th>London</th>
<th>30</th>
<th>2008/12/19</th>
<th>$90,560</th>
</tr>
</tbody>
</table>
</body>
</html>
|
|
24.02.2017, 19:45
|
|
Аспирант
|
|
Регистрация: 23.01.2017
Сообщений: 80
|
|
|
Пасибо. У рони код в сращивании изначально был рабочий, сори
Последний раз редактировалось JAMLIGHT, 24.02.2017 в 19:52.
|
|
24.02.2017, 19:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от JAMLIGHT
|
|
Приведи весь код в сборке, а то чё то у меня после замены таблица не инициализируется
|
не осилил |
|
24.02.2017, 19:53
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от рони
|
|
идея понятна но код не рабочий
|
Да вроде должно работать ) |
|
|
|
