Как использовать плагин с данными JQuery

Question

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

На главном экране я не знаю точно, какие скрипты мне нужны или не нужны:

<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> 

Answer 1

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

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

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

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

Answer 2

Используйте простой следующий скрипт для 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 для добавления стиля таблиц

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

Запуск функции jquery для отображения данных

<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.

<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 в таблице.

Answer 3

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

$('#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. но когда я добавляю новую запись и снова инициализирую таблицу данных, то последняя вставленная запись не будет первой в списке.

Answer 4

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

Answer 5

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

Jovan