1

このリンクをたどって、Jquery Datatables を動的にロードするための ajax 呼び出しを行います

http://datatables.net/forums/discussion/3442/x&page=1#Item_10 .

試し始める前に、ここで自分の考えに行き詰まりました。

では、DataTables が iDisplayLength、iDisplayStart、sEcho などのプロパティを送信して、ページネーションを作成し、レコードを表示するにはどうすればよいでしょうか。

どうすればこれを処理できますか?

クイック リファレンス用のリンクのサンプル コード

$.ajax( {
        "dataType": 'text',
        "type": "GET",
        "url": "dtJSON.txt",
        "success": function (dataStr) {
            var data = eval( '('+dataStr+')' );
          $('#example').dataTable({
                "aaSorting": [[0, "desc"]],
                "aaData": data.aaData,
                "aoColumns": data.aoColumns,
                "bScrollCollapse": true,
                "bFilter": false,
                "sPaginationType": "full_numbers",
                "bJQueryUI": true,
                "aoColumnDefs": data.aoColumnDefs
          });
        }
    } );

ajax を使用してデータと列の詳細を取得できますが、MVC でコントローラーに送信されたパラメーターをどのように処理すればよいですか?

いくつかの支援をいただければ幸いです:)

ありがとう

4

2 に答える 2

1

私の推奨事項は、ハンドルバーを使用してクライアントで de テーブルをレンダリングし、データテーブルを適用した後にすることです。

空のテーブルが必要になります:

<table id="mytable">
  <thead>
      <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
      </tr>
  </thead>
  <tbody id="table_data_container">
      <!-- Populated by JS -->
  </tbody>
</table>

ajaxリクエスト、サーバー側でページネーションを行わないでください。データテーブルがクライアント側でそれを処理します。これは、現在のページをサーバーに送信する必要がなく、利用可能なすべての行を返すだけであることを意味します、行数が非常に多い場合は、名前、ID、またはその他の検索のようにユーザーにフィルタリングを強制してから、そのフィルターを ajax リクエストで送信できます。

$.ajax({
    type: method,
    url: url,
    async: async,
    data: parameters,
    dataType: dataType,
    success: function(json){
        var container = $('#table_data_container');
        //your response should be an object like { items : [item,item,item,...] }
        var template = '{{#each item}}<tr><td>{{this.col1}}</td><td>{{this.col1}}</td><td>{{this.col1}}</td></tr>{{/each}}' //visit http://handlebarsjs.com/ for info
        RenderJson(json,template,container); //this will generate thehtml for the rows and append it to the table
        $('#mytable').dataTable();
    },
    error: function(response){
        alert('Error!');
    }
});

そしてレンダリング関数:

function RenderJson(json,template,container) {
    var compiledTemplate = Handlebars.compile(template);
    var html = compiledTemplate(json);
    $(container).html(''); //remove previous content
    $(container).html(html); //set new content
}

それが役に立てば幸い ;）

于 2013-04-25T09:28:16.940 に答える