Как использовать плагин jQuery datatable

Я действительно новый jQuery и MVC3, я загрузил jQuery datatable plugin из http://datatables.net/, и я полностью смущен тем, как реализовать таблицу. Я просто пытаюсь отобразить таблицу, мне все равно, что на ней, я просто хотел бы получить ее в представлении в первую очередь. Любая помощь или совет будут оценены.Как использовать плагин jQuery datatable

В главном окне, я не знаю точно, что сценарии мне нужно или не нужно:

<h2>About</h2> 
@*<script src="../../Scripts/DataTables.js" type="text/javascript"></script>*@ 
<script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.dataTables.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.MetaData.js" type="text/javascript"></script> 
@*<script src="../../Scripts/model.column.js" type="text/javascript"></script> 
<script src="../../Scripts/model.search.js" type="text/javascript"></script> 
<script src="../../Scripts/model.row.js" type="text/javascript"></script> 
<script src="../../Scripts/model.ext.js" type="text/javascript"></script>*@ 
@*<script src="../../Scripts/model.defaults.js" type="text/javascript"></script> 
<script src="../../Scripts/model.defaults.columns.js" type="text/javascript"> </script>*@ 
<link href="../../Content/jquery.dataTables.css" rel="Stylesheet" type="text/css" /> 

<script type="text/javascript"> 
    $('#usersGrid').dataTable({ 
     aoData: [{}] 
    }); 
</script> 

<script type="text/jscript"> 
    $('#usersGrid').dataTable({ 
     aoData: [{}] 
    }); 
</script> 

<table id="table_id"> 
    <thead>   
     <tr>    
      <th>Column 1</th>   
      <th>Column 2</th>   
      <th>etc</th>  
     </tr> 
    </thead> 
    <tbody> 
     <tr>  
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
      <td>etc</td> 
     </tr> 
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
      <td>etc</td> 
     </tr> 
    </tbody> 
</table>

источник

2012-03-01 TMan

Незнакомый с DataTables, единственный комментарий, который у меня есть, заключается в том, что вам не нужно включать jquery.dataTables.js и jquery.dataTables.min.js. «.min» означает, что это «миниатюрная» версия (тот же скрипт, сжатый в менее читаемый, но меньший файл, для экономии полосы пропускания). Таким образом, вы можете выбрать тот или иной. –

О, хорошо, это то, чего я не знал. Там действительно нет хороших обучающих программ где-нибудь, где кто-то действительно показывает шаг за шагом, как использовать эти jquery-плагины. – TMan

начните с только скриптов и css из примеров и оттуда оттуда – charlietfl

Я всегда чувствовал, что веб-сайт DataTables имел очень хорошие примеры, все с примерами кода , Поэтапное направление не обязательно, но более простые примеры довольно просты.

Независимо от того, что в его простейшей форме все, что нужно для работы DataTables, является допустимым объектом jQuery (и источником DataTables, конечно). Одна из проблем в вашем коде выше: ваша таблица имеет идентификатор table_id, но вы пытаетесь инициализировать dataTables в таблице с идентификатором usersGrid. Кроме того, вы должны ввести код инициализации в пределах $(document).ready()

Я собрал this quick demo, чтобы вы могли посмотреть. У него нет всех причудливых кнопок и вещей, но есть базовая функциональность - вы можете сортировать столбцы и т. Д. Обратите внимание, как идентификатор таблицы соответствует селектору jQuery. Кроме этого, все, что вам нужно сделать, это вызвать .dataTable() метод:

$(document).ready(function() { 
    $('#table_id').dataTable(); 
});

источник

2012-03-01 02:45:11

У вас есть некоторое описание в Enhancing-HTML-tables-using-a-JQuery-DataTables-pl. Однако, если вам нужны живые примеры, лучше всего использовать сайт datatables.

Йован

источник

2012-03-08 15:11:03

Следующий пример может выполнить ваши требования, которые указаны соответствующие JS и CSS файлы. В этом я также использую тему jQuery, для которой используется третий файл css. Вы можете загрузить первые два css-файла с datatables, а третий - с официального веб-сайта jQuery.

<head> 
<link href="../css/table_sort_page.css" rel="stylesheet" type="text/css" /> 
<link href="../css/table_sort_jui.css" rel="stylesheet" type="text/css" /> 
<link href="../css/themes/cupertino/jquery.ui.all.css" rel="stylesheet" type="text/css"/> 

<script src="../js/jquery-1.6.2.js" type="text/javascript"></script>  
<script src="../css/ui/jquery-ui-1.8.16.custom.js" type="text/javascript"></script> 
<script src="../js/jquery.dataTables.js" type="text/javascript" ></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#table_id").dataTable({ 
     "bJQueryUI": true, 
     "aoColumns": [{ "bSortable": true }, { "bSortable": true }] 
    });  
    }); 
</script> 
</head> 

<body> 
<table id="table_id"> 
<thead>   
    <tr>    
     <th>Column 1</th>   
     <th>Column 2</th>   
     <th>etc</th>  
    </tr> 
</thead> 
<tbody> 
    <tr>  
     <td>Row 1 Data 1</td> 
     <td>Row 1 Data 2</td> 
     <td>etc</td> 
    </tr> 
    <tr> 
     <td>Row 2 Data 1</td> 
     <td>Row 2 Data 2</td> 
     <td>etc</td> 
    </tr> 
</tbody> 
</table> 
</body>

источник

2012-08-31 10:11:20 Mahbub

Использование Simple Этот два сценария для JQuery DataTable

<script type="text/javascript" language="javascript" src="js/jquery.js"></script> 
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>

Использование Css Для добавления стиля Tabel

<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">

Run функции JQuery для отображения DataTable

<script type="text/javascript" language="javascript" class="init"> 
    $(document).ready(function() {$('#TABLE_ID').dataTable({'iDisplayLength': 2,//Set Row Per Page 
    "bFilter": false,//Remove Search 
    "bPaginate" : false,//Remove Pagination 
    "bInfo": false,//Remove Page Info 
    "bLengthChange":false,//Show per Page Dropdown Remove 
    "columnDefs": [ { "targets": 0, "orderable": false } ],//Remove Colum Orderable(Here Col 0 Remove) 
    "aoColumns": [{ "asSorting": [] },{ "asSorting": [ "asc" ] },{ "asSorting": [ "desc", "asc" ] },{ "asSorting": [ "desc" ] },null],//Set Colum Order By ASC Or DSC 
    "sPaginationType": "full_numbers"//Full Pagination 
    }); 
    }); 
</script>

Создать таблицу Для применения jquery datatable.

<table id="TABLE_ID"><thead><tr><th>Name</th><th>Position</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td></tr><tr><td>Garrett Winters</td><td>Accountant</td></tr><tr><td>Ashton Cox</td><td>Junior Technical Author</td></tr><tr><td>Cedric Kelly</td><td>Senior Javascript Developer</td></tr></tbody></table>

Здесь создают таблицы должны Пользователями <thead> и <tbody> тегов для применить JQuery в таблице.

источник

2014-07-03 09:58:31 himansu

Я использую серверную часть jquery datatable.

$('#sample-data-table').DataTable({ 
    "destroy": true, 
    "processing": false, 
    "serverSide": true, 
    "searching": true, 
    "oLanguage": { 
     "sEmptyTable": "No client available."  
    },  
    "lengthMenu": [  
     [10, 20, 50, -1],  
     [10, 20, 50, "All"] 
    ], 
    "order": [], 
})

он будет сортировать список, так как я получаю с серверной стороны OrderByDescending. , но когда я добавлю новую запись и снова инициализирую данные, то последняя вставленная запись не будет сверху в списке.

источник

2018-02-17 20:59:38 Gobind

Как использовать плагин jQuery datatable

ответ

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