Какие файлы необходимы для использования dataTable? - PullRequest
Новая
       21

Какие файлы необходимы для использования dataTable?

4 голосов
/ 06 февраля 2012

Я пытаюсь инициировать DataTable, но не могу. 

<style type="text/css" title="currentStyle">
    @import "demo_page.css";
    @import "demo_table.css";
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>

  1. Что не так?

  2. Требуется ли структура таблицы?

  3. Требуются ли данные? 

<table id="example">    
    <thead>
       <tr>
           <th>Column 1</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody> 
</table>

Ответы [ 4 ]

4 голосов
/ 06 февраля 2012

Вам нужно только два файла для инициализации:

  1. jQuery (однако вы хотите включить его); затем
  2. jquery.dataTables.js (или уменьшенная версия).

Ваша таблица будет выглядеть безумно без соответствующего CSS (для облегчения сортировки значков добавлены различные промежутки), но они не нужны. Они просто стиль.

Если он не инициализируется с этими двумя файлами и вызовом $('#myTable').dataTable() (в функции готовности документа), тогда происходит что-то еще, и вам нужно будет посмотреть на консоль JavaScript, чтобы увидеть, какие ошибки выдают.

Вот в их среде jsbin: http://live.datatables.net/olofeg

Нет CSS, только два JS-файла, правильно сформированная таблица и вызов dataTable() из функции готовности документа.

3 голосов
/ 06 февраля 2012

Чтобы использовать datatable, у вас есть много вариантов, одна возможность состоит в том, чтобы иметь хорошо сформированную (с <thead> и <tbody>) HTML-таблицу для «преобразования» 

<style type="text/css" title="currentStyle">
    @import "demo_page.css";
    @import "demo_table.css";
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<table id="example">
   <thead>
       <tr>
           <th>Column 1</th>
       </tr>
    </thead>
    <tbody>
        <tr>
            <td>data</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
//initialize datatables
    (function($){
       $('#example').dataTable();
    });
 </script>
1 голос
/ 06 февраля 2012

Вы должны вызвать функцию dataTable в javascript 

<script type="text/javascript">
    $(document).ready(function(){
        $("example").dataTable();
    });
</script>
0 голосов
/ 02 августа 2016

Я исследовал полный день. Предположительно, jQuery используется большим количество людей, но я не смог найти «Единый» блог, который говорит, что все «минимальные» вещи, которые будут импортированы в ваш HTML / JSP для используя функциональные возможности JQuery Datatable ... Следовательно, у меня есть скомпилировал это в небольшую HTML-страницу, как показано ниже (это полностью рабочий материал, поэтому, пожалуйста, начните отсюда и постройте его по-своему ..) 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>		
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
	   
	<script type="text/javascript">
		$(document).ready(function () {
			$("#companies").dataTable({
				"sPaginationType": "full_numbers",
				"bJQueryUI": true
			});
		});
	</script>
</head>
	
    <body id="dt_example">
        <div id="container">
            <div id="demo_jui">
                <table id="companies" class="display">
                    <thead>
                        <tr>
                            <th>Company name</th>
                            <th>Address</th>
                            <th>Town</th>
                        </tr>
                    </thead>
                    <tbody>
						<tr>
							<th>Atlassian</th>
							<th>Paramatta</th>
							<th>Sydney</th>
						</tr>
						<tr>
							<th>Oracle</th>
							<th>Whitefield</th>
							<th>India</th>
						</tr>
                    </tbody>
                </table>
         </div>
        </div> 
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...