Datatables не может использовать сортировку по столбцу или поиск по содержанию - PullRequest
Новая
       1

Datatables не может использовать сортировку по столбцу или поиск по содержанию

0 голосов
/ 13 декабря 2018

Я создаю DataTable в функции javascript, и когда я это делаю, фильтр «поиска» не появляется и сортировка столбца не работает.На самом деле, похоже, что CSS больше не работает.

Вот мой код: 

<html>
<head>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" rel="stylesheet"/>
</head>
<body>
	<div id="area-panel-content" class="col-md-12">
		<table id="example" class="display" style="width:100%">
			<thead>
				<tr>
					<th>Repository</th>
					<th>Date</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				<tr><td>AAA</td><td>AAA</td><td>AAA</td></tr>
				<tr><td>BBB</td><td>BBB</td><td>BBB</td></tr>
			</tbody>
		</table>
	</div>
	<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.3.1.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
	<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
	<script>
	$(document).ready(function() {
		var currentTable = $('#example').DataTable();
		fillDataTable();
	} );
	
	function fillDataTable() {
		var folders = "";
		for(var i = 0; i < 5; i++) {
			folders = folders+
			'<tr><td><i class="fa fa-folder" aria-hidden="true"></i>Event'+i+'</td><td>25/12/2018</td><td></td></tr>';
		}
		var tableStart = '<table id="example" class="display" style="width:100%"><thead><tr><th class="sorting" aria-sort="ascending">Repository</th><th class="sorting" aria-label="Column 2: activate to sort column ascending">Date</th><th>Action</th></tr></thead><tbody>';
        var tableEnd = '</tbody></table>';

        $("#area-panel-content").replaceWith('<div id="area-panel-content" class="col-md-12">'+tableStart+folders+tableEnd+'</div>');
	
	}
</script>
</body>
</html>

Если вы прокомментируете функцию fillDataTable (), она работает нормально.Мне нужно создать DataTable, как будто я пытаюсь сделать это выше фрагмента.

Не могли бы вы помочь мне понять, что я делаю неправильно?Большое спасибо.

1 Ответ

0 голосов
/ 13 декабря 2018

Вы инициализируете свою таблицу данных, а затем заменили ее другой таблицей.Вам нужно инициализировать вашу таблицу данных после того, как вы создали свою динамическую таблицу.Измените вашу $(document).ready функцию на: 

$(document).ready(function () {
  fillDataTable();
  $('#example').DataTable();
});

Ps.вам не хватает ссылки как на jQuery, так и на библиотеку jQuery DataTable.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...