Comment faire pour utiliser jQuery plugin datatable

Je suis vraiment nouveau jQuery et MVC3, j'ai téléchargé le jquery datatables plugin de http://datatables.net/ et je suis totalement confus sur la façon de mettre en œuvre la table. Je suis juste essayer d'afficher la table, je n'aime pas ce qui est sur, j'aimerais juste l'obtenir vers le haut sur la vue en premier. De l'aide ou des conseils seraient appréciés.

Dans la vue principale, je ne sais pas exactement ce que les scripts j'ai besoin ou n'en avez pas besoin:

<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>
D'être familier avec les tables de données, le seul commentaire que j'ai, c'est que vous n'avez pas besoin d'inclure à la fois jquery.dataTables.js et jquery.dataTables.min.js. L' ".min" indique qu'il s'agit d'une "compacte" version (le même script compactée dans un moins lisible mais de plus petite taille de fichier, pour économiser de la bande passante). Ainsi, vous pouvez choisir l'un ou l'autre.
oh eh bien merci c'est quelque chose que je ne savais pas. Il n'y a vraiment pas de bons tutoriels partout où quelqu'un a fait montre étape par étape comment utiliser ces plugins jquery
commencez avec seulement les scripts et css à partir d'exemples et de travailler à partir de là
bmthrive.com/datatables-jquery-plugin

OriginalL'auteur TMan | 2012-03-01

  1. 7

    J'ai toujours senti que les tables de données du site web de l'eu d'assez bons exemples, le tout avec des exemples de code. Il n'y a pas, étape par étape, les directions, forcément, mais la plus basique des exemples sont assez simple.

    Indépendamment, dans sa forme la plus simple, tous vous avez besoin pour obtenir les tables de données de travail est valide d'un objet jQuery (et les tables de données source, bien sûr). Un problème dans votre code ci-dessus est que votre table a une ID de table_id, mais vous essayez d'initialiser les tables de données sur une table avec un ID de usersGrid. Aussi, vous devez mettre le code d'initialisation dans $(document).ready()

    J'ai mis en place cette rapide démonstration pour vous de regarder. Ce n'est pas la fantaisie des boutons et des choses, mais la fonctionnalité de base est là - vous pouvez trier les colonnes, etc. Remarquez comment l'ID de la table correspond au sélecteur jQuery. Autre que cela, tout ce que vous avez à faire est d'appeler le .dataTable() méthode:

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

    OriginalL'auteur Colin Brock

  2. 1

    Utilisation Simple à la Suite de deux script jquery Datatables

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

    Utiliser les Css Pour ajouter un style de tableau

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

    Exécuter en fonction jquery pour l'affichage 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>

    Create Table Pour appliquer jquery datatables.

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

    Ici de créer la Table Utilisateur doit <thead> et <tbody>Balise pour appliquer jQuery dans le Tableau.

    OriginalL'auteur himansu

  3. 0

    L'exemple suivant peut répondre à vos besoins qui affiche les fichiers css et js. En cela, je suis également à l'aide de jQuery thème pour lequel le troisième fichier css est utilisé. Vous pouvez télécharger les deux premiers fichiers css de datatables et le troisième à partir de jQuery site officiel lui-même.

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

    OriginalL'auteur Mahbub

  4. 0

    Vous avez une description dans le L'amélioration de-HTML-les tables-aide-un-JQuery DataTables-pl . Toutefois, si vous souhaitez vivre des exemples, il serait préférable d'utiliser des tables de données du site.

    Jovan

    OriginalL'auteur Jovan MSFT

  5. 0

    je suis à l'aide de jquery datatables côté serveur.

    $('#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": [],   
})

    il permet de trier la liste que je reçois de serveur-côté par OrderByDescending.
    mais quand j'ai ajouter un nouvel enregistrement et d'initialiser le datatable à nouveau, puis le dernier enregistrement inséré n'est pas venue en tête dans la liste.

    OriginalL'auteur Gobind Gupta