Парящий в DIV, когда на DataTables заголовка ячейки

Я в настоящее время фильтрации DIV:Парящий в DIV, когда на DataTables заголовка ячейки

<div class="filterOptions" id="FilterStatus"> 
<input type="checkbox" id="Status1" data-status="1"><label for="Status1">1</label> 
<input type="checkbox" id="Status2" data-status="2"><label for="Status2">2</label> 
<input type="checkbox" id="Status3" data-status="3"><label for="Status3">3</label> 
<input type="checkbox" id="Status4" data-status="4"><label for="Status4">4</label> 
</div>

Что с собственным немного JavaScript делает работу отлично. Однако я хотел бы разместить это чуть ниже заголовка столбца «Состояние», когда заголовок загорается. Полагая, что код в самой таблице удаляет код, так есть где-то еще, я должен добавить его?

Этот jsfiddle показывает вид происходящего. На этом он показывает div, хотя он перемещает его из таблицы div. В идеале я хочу, чтобы он отображался только при наведении указателя на конкретный заголовок таблицы, но я в тупике.

источник

2017-02-10 BN83

Вы возражаете бы создать скрипку для демонстрации проблемы или вопроса вы столкнулись? –

У меня все получится ... Я не уверен, что это проблема, тем более, что при запуске datatables это просто игнорирует мой пользовательский div полностью! Посмотрю, смогу ли я его воссоздать. – BN83

@VilasKumkar добавил jsFiddle. – BN83

Что-то вроде this:

var table = $('#myTable').DataTable({ 
    autoWidth: false, 
    initComplete: function(settings, json) { 
     let api = new $.fn.dataTable.Api(settings); 
     let header = api.column(0).header(); 
     let originalText = $(header).text(); 
     let newText = originalText + `<div class="filterOptions" id="FilterStatus"> 
       <input type="checkbox" id="Status1" data-status="1"> 
       <label for="Status1">1</label> 
       <input type="checkbox" id="Status2" data-status="2"> 
       <label for="Status2">2</label> 
       <input type="checkbox" id="Status3" data-status="3"> 
       <label for="Status3">3</label> 
       <input type="checkbox" id="Status4" data-status="4"> 
       <label for="Status4">4</label> 
      </div>`; 
     $(header).html(newText).attr("id", "hover") 
    } 
});

С этот CSS:

#FilterStatus { 
    display: none; 
} 

#hover:hover #FilterStatus { 
    display: block; 
}

Вам нужно будет изменить действие своих флажков!

источник

2017-02-10 13:33:54 annoyingmouse

Это почти пятно и добавило некоторые стили, чтобы сделать абсолютное положение div таким образом, чтобы он не влиял на заголовок ... Только проблема заключается в том, что когда вы нажимаете в любом месте всплывающего окна, он подсчитывает его как щелчок на заголовке , что означает, что он переупорядочивает эту колонку. – BN83

См. Здесь, как щелчок по абсолютному div по-прежнему регулирует родительский https://jsfiddle.net/pkbhpLtf/12/ – BN83

Теперь у него есть обходной путь, используя 'stopPropagation();' – BN83

Ну один подход ставит второй <tr> под <thead> и добавив hover событие с JQuery, как так:

$('.status-header').hover(function(){ 
 
    $('.filterOptions').css('display','inline'); 
 
}, function(){ 
 
    $('.filterOptions').css('display','none'); 
 
}) 
 

 
var table = $('#myTable').DataTable({autoWidth: false});

.filterOptions { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" rel="stylesheet" /> 
 
<table id="myTable" class="display"> 
 
    <thead> 
 
     <tr> 
 
      <th class="status-header">Status 
 

 
      </th> 
 

 
      <th>Col 1</th> 
 
      <th>Col 2</th> 
 
     </tr> 
 
     <tr class="status-header"> 
 
      <td colspan="3" class=""> 
 
       <div class="filterOptions" id="FilterStatus"> 
 
        <input type="checkbox" id="Status1" data-status="1"><label for="Status1">1</label> 
 
        <input type="checkbox" id="Status2" data-status="2"><label for="Status2">2</label> 
 
        <input type="checkbox" id="Status3" data-status="3"><label for="Status3">3</label> 
 
        <input type="checkbox" id="Status4" data-status="4"><label for="Status4">4</label> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Status 1</td> 
 
      <td>Row 1 Data</td> 
 
      <td>Row 1 Data</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Status 2</td> 
 
      <td>Row 2 Data</td> 
 
      <td>Row 2 Data</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

источник

2017-02-10 13:23:08

Это беспорядок сортировки столов, я уже пробовал. – BN83

@ BN83 Когда я нажимаю «Состояние», он все еще правильно сортируется. Вы проверили, что я сделал? –

А теперь это работает, возможно, в последнем редактировании, которое вы сделали? К сожалению, мне не нужен дополнительный стол. @ Ответ annoyingmouse почти идеален для того, что я пытаюсь сделать, хотя. Но спасибо за помощь. – BN83

заказ это: Использование CSS

Примечание: Вы должны заботиться, прежде чем использовать этот фрагмент кода, как и сам DataTable рода на щелчку «й» метки, используя некоторые CSS, я сумел преодолеть от этого вопроса, но он не фиксируется на 100%.

var table = $('#myTable').DataTable({autoWidth: false});

ul { 
 
\t list-style: none; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
ul li { 
 
\t position: relative; 
 
} 
 
ul li ul { 
 
\t display: none; 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t background-color: rgba(0,0,0,.8); 
 
\t color: #fff; 
 
\t width: 100%; 
 
\t padding: 10px; 
 
} 
 
ul li:hover ul { 
 
\t display: block; 
 
} 
 
ul li li { 
 
\t display: block; 
 
\t clear: both; 
 
\t 
 
} 
 
ul li ul input[type="checkbox"] { 
 
\t cursor: not-allowed; 
 
\t display: block; 
 
\t float: left; 
 
\t margin: 5px 10px 0 0; 
 
} 
 

 
ul li ul label { 
 
\t width: 100%; 
 
\t float: left; 
 
\t display: block; 
 
\t cursor: pointer; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.css" rel="stylesheet"/> 
 

 
<table id="myTable" class="display"> 
 
\t \t \t <thead> 
 
\t \t \t \t <tr> 
 
      <th> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t <a href="#">Status</a> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><label for="Status1"><input type="checkbox" id="Status1" data-status="1">1</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><label for="Status2"><input type="checkbox" id="Status2" data-status="2">2</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><label for="Status3"><input type="checkbox" id="Status3" data-status="3">3</label></li> 
 
\t \t \t \t \t \t \t \t \t <li><label for="Status4"><input type="checkbox" id="Status4" data-status="4">4</label></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </th> 
 
\t \t \t \t \t <th>Col 1</th> 
 
\t \t \t \t \t <th>Col 2</th> 
 
\t \t \t \t </tr> 
 
\t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
      <td>Status 1</td> 
 
\t \t \t \t \t <td>Row 1 Data</td> 
 
\t \t \t \t \t <td>Row 1 Data</td> 
 
\t \t \t \t </tr> 
 
     <tr> 
 
      <td>Status 2</td> 
 
\t \t \t \t \t <td>Row 2 Data</td> 
 
\t \t \t \t \t <td>Row 2 Data</td> 
 
\t \t \t \t </tr> 
 
     </tbody> 
 
</table>

источник

2017-02-10 13:42:45

Парящий в DIV, когда на DataTables заголовка ячейки

ответ

Смежные вопросы