jQueryデータテーブルプラグインの使い方

私は本当に新しいjQueryとMVC3です.jQuery datatableプラグインをhttp://datatables.net/からダウンロードしました。テーブルの実装方法は完全に混乱しています。私はちょうどテーブルを表示しようとしている、私はそれに何か気にしない、私はちょうど最初にビューにそれを取得したいと思います。助けやアドバイスをいただければ幸いです。メインビューでjQueryデータテーブルプラグインの使い方

、私は私が必要か、必要のない、まさにスクリプトを知らない：

<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

DataTableに慣れていないため、jquery.dataTables.jsとjquery.dataTables.min.jsの両方を含める必要はありません。「.min」は、それが「小型化」バージョン（帯域幅を節約するために、読みにくいが小さいファイルに圧縮された同じスクリプト）であることを示します。だからあなたはどちらかを選ぶことができます。 –

ああよくthxそれは私が知らなかったものです。実際に誰かが実際にこれらのjqueryプラグインを使用する方法を段階的に示す良いチュートリアルはありません – TMan

サンプルとスクリプトから始めるだけです。 – charlietfl

私は、DataTableのウェブサイトは、すべてのサンプルコードでかなり良い例が、持っていたことを常に感じていました。ステップバイステップの指示はありませんが、より基本的な例はかなり簡単です。

最も単純な形式で、DataTableを有効にするには、有効なjQueryオブジェクト（およびDataTablesソース）が必要です。上記のコードの1つの問題は、テーブルのIDがtable_idであるが、IDがusersGridのテーブルでdataTablesを初期化しようとしていることです。また、初期化コードを$(document).ready()に入れてください

私はthis quick demoを一緒に入れて見てください。それはすべての派手なボタンと物事を持っているわけではありませんが、基本的な機能はすべてそこにあります - 列などを並べ替えることができます。テーブルのIDがjQueryセレクターにどのように対応しているかに注目してください。

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

出典

2012-03-01 02:45:11

あなたはEnhancing-HTML-tables-using-a-JQuery-DataTables-plでいくつかの説明があります。それ以外は、すべてあなたがしなければならない.dataTable()メソッドを呼び出すことです。しかし、ライブサンプルが必要な場合は、datatables siteを使用するのが最善です。

ジョーバン

出典

2012-03-08 15:11:03

次の例では、関連のjsとcssファイルを示して、あなたの要件を満たすことができます。これでは、3番目のCSSファイルが使用されるjQueryテーマも使用しています。最初の2つのCSSファイルはdatatablesからダウンロードでき、3つ目のファイルはjQueryの公式Webサイトからダウンロードできます。

<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

使用シンプル次の二つの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の機能をtabelのスタイルを追加した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データテーブルの場合。ここで

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

表のjQueryを適用するための表必要があるユーザー<thead>と<tbody>タグを作成します。

出典

2014-07-03 09:58:31 himansu

私はjquery datatable server側を使用しています。

$('#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データテーブルプラグインの使い方

答えて

関連する問題