2017-02-15 30 views
0

私はJquery Datatableプラグインの助けを借りてサーバーサイドページネゴシエーションを実装しようとしています。いくつかのデータを表示し、それはユーザーが日付(基本的に月と年)を選択してレコードを検索することができる外部検索フィールドを持っています。ユーザーが検索を選択するたびに、データテーブルをリフレッシュする必要があります。Jquery Datatableサーバーサイドページネーション外部検索フィールド

DATATABLE

var LeaveDetailsTable = $('#LvReprtTable').DataTable({ 
    "pageLength": 5, 
    "processing": true, 
    "serverSide": true,"searching": false,"bLengthChange": false, 
    "ajax": { 
     "url": "GetLeaveDetails", 
     "type": "POST", 
     "datatype": "json", 
     "data": function (d) { 
      d.EmpId = empId; 
      d.UserType = userType; 
      d.Month = "1"; 
      d.year = "2017"; 
     } 
    }, 
    "columns": [ 
      { "data": "_fromdate" }, 
      { "data": "_todate" }, 
      { "data": "_strLvType" }, 
      { "data": "_leavedurationtype" }, 
      { "data": "_leavedurationtype" }, 
      { "data": "_leavedurationtype" }, 
     ], 
    "columnDefs": [{ 
     "targets": -1, 
     "data": data, 
     "defaultContent": "<button>Click!</button>" 
    }] 
    ,"language": 
    { 
     "processing": "<div class='row text-center waitIconDiv' id='LoadIconDiv'><img alt='Progress' src='~/Content/images/wait_icon.gif' width='50' height='50' id='imgProgLvRprt' /></div>" 
    }, 
}); 

Monthyear変化してもよいです。

+0

コントローラの操作を表示できますか? –

+0

とこの記事を見て:https://www.codeproject.com/Articles/1170086/Implement-Grid-with-Server-Side-Advanced-Search-us –

答えて

1

:このため、私はあなたが下のリンクを経由をお勧めします

掲載します
LeaveDetailsTable.ajax.reload(); 

コントローラーアクションにdataプロパティで追加された新しいパラメーターを持つデータ型の状態。

また、this article (Server Side Advanced Search using JQuery DataTables)では、JQuery DataTablesを使用してカスタムパラメータをコントローラアクションに送信する方法についても説明しています。

0

これを達成するには、jquery onchangeメソッドを使用することをお勧めします。例:ここでは

$('.input-class').on('change', function() { 
    $table.fnDraw(); 
}); 

$tableはあなたのDataTableの名前を指し、fnDraw()は、あなたのテーブルを更新するDataTableの機能です。 もちろん、検索フィールドからリクエストにデータを追加する必要があります。あなたが好きな要素がどのような場合にはデータテーブルインスタンス上ajax.reload()を呼び出す必要があります

datatables

関連する問題