ページの読み込みとボタンのクリックの両方でjクエリajax呼び出しを行う

Question

私はajax呼び出しからデータを取得するデータテーブルを持っています。通常、ページが読み込まれたときにajaxが実行され、データテーブルがデータで埋められます。

しかし、私は自分のデータテーブルにいくつかの検索オプションを追加したいと思います。パラメータをサーバー側に送信し、データセットをフィラーで取得することができます。

私がしたいことは、ページロード時にヌルパラメータでロードされたデータテーブルを必要とし、ボタンをクリックしてパラメータ付きのajaxを送信し、フィルタリングされたデータを取得することです。私が試した何

は私が私の検索ボタンをクリックして内部で置くことができることができるように、単一のパラメータでjqueryの関数内でのAjaxイベントを取得しようとしました。この

<script> 
    //var searchInput ;//search için aramadaki değeri almaya çalışma 

    $(document).ready(function TableData(searchInput) { 
     var getUrlParameter = function getUrlParameter(sParam) { 
      var sPageURL = decodeURIComponent(window.location.search.substring(1)), 
       sURLVariables = sPageURL.split('&'), 
       sParameterName, 
       i; 

      for (i = 0; i < sURLVariables.length; i++) { 
       sParameterName = sURLVariables[i].split('='); 

       if (sParameterName[0] === sParam) { 
        return sParameterName[1] === undefined ? true : sParameterName[1]; 
       } 
      } 
     }; 

     //var searchInput = $("#inpSearch").val();//search için aramadaki değeri almaya çalışma 
     var DocumentTypeId = getUrlParameter('DocumentTypeId'); 
     var Type = getUrlParameter('Type'); 
     //console.log("dokumantip: " + DocumentTypeId); 
     //console.log("tip: " + Type); 

     var datatable = null; 
     $(document).ready(function() { 
      $.extend(true, $.fn.dataTable.defaults, { 
       "searching": false, 
       "ordering": false 
      }); 


      @*var dataSourceUrl = "@Url.Action( Inbox ? "InboxList" : "OutboxList" ,"Folder")";*@ 
      @*var dataSourceUrl = "@Url.Action(Inbox ? "InboxListByType" : "OutboxList" ,"Folder")";*@ 

      if (Type == 1) { 
       var dataSourceUrl = "@Url.Action(Inbox ? "ERPListByType" : "OutboxList" ,"Folder")"; 
      } else if (Type == 2) { 
       var dataSourceUrl = "@Url.Action(Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; 
      } else if (Type == 3) { 
       var dataSourceUrl = "@Url.Action(Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")"; 
      } else if (Type == 4) { 
       var dataSourceUrl = "@Url.Action(Inbox ? "DeletedDocumentsList" : "OutboxList" ,"Folder")"; 
      } else { 
       //açılış ekranında default gelen kutusu e-TCGB gelsin 
       var dataSourceUrl = "@Url.Action(Inbox ? "InboxListByType" : "OutboxList" ,"Folder", new { DocumentTypeID = 3 })"; 
      } 

      if ($.fn.dataTable.isDataTable('#expandabledatatable')) { 
       $('#expandabledatatable').dataTable().fnDestroy(); 
      } 

      datatable = $('#expandabledatatable').dataTable({ 
       //"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>", 
       //"processing": true, 
       //info: false, 

       serverSide: true, 
       ajax: { 
        "url": dataSourceUrl, 
        "data": { DocumentTypeId: DocumentTypeId, searchInput: searchInput }, 
        "type": "POST" 
       }, 
       columns: [ 
        { 
         "data": "Id", 
         "render": function (data, type, row) { 
          return "<label><input type='checkbox' value='" + data + "' name='chkGrid'><span class='text'></span></label>"; 
         } 
        }, 
        { "data": "@Html.Raw(Inbox ? "SenderCompany" : "ReceiverCompany")" }, 
        { "data": "DocumentTypeName" }, 
        { 
         "data": "RegistrationDate", 
         "render": function (data, type, row) { 
          return moment(parseInt(data.substr(6))).format('DD.MM.YYYY hh:mm'); 
         } 
        }, 
        { 
         "data": "RegistrationCode", 
         "render": function (data, type, row) { 
          console.log(row); 
          return "<a href='@Url.Action("View","Folder")/" + row["Id"] + "'>" + data + "</a>"; 
         } 
        }, 
        { "data": "CustomsTransportType" }, 
        { "data": "VehicleIdNo" }, 
        { "data": null, "defaultContent": "" }, 
        { "data": "ConsignorName" }, 
        { "data": "ConsigneeName" }, 
        { "data": "TotalNoOfPackages" }, 
        { "data": "TotalGrossWeight" } 
       ], 
       iDisplayLength: 10, 
       language: { 
        "info": "Toplam kayıt : \_TOTAL\_<br/> Gösterilen : \_START\_ - \_END\_", 
        "paginate": { 
         "first": "İlk", 
         "last": "Son", 
         "next": "İleri", 
         "previous": "Geri" 
        } 
       } 
      }); 



     }); 
    }); 


    $(document).ready(function() { 
     $('#btnSearch').click(function() { 
      alert("test"); 
      TableData($('#inpSearch').val()) 
     }) 
    }); 



</script> 

です。しかし、私はそれが欲しいのと同じように働くことができます。

EDIT：

データは

string DatatableJson = Utility.DatatableToJson(ds.Tables[0]); 

return Content("{ \"draw\": " + Draw + ", \"recordsTotal\" :" + TotalRows + " , \"recordsFiltered\": " + TotalRows + ", \"data\": " + DatatableJson + " } "); 

DSとしてのActionResultから返されたストアドプロシージャを介してデータベースから戻るデータテーブルです。

EDIT 2：

は私が

$('#btnSearch').click(function() { 
      //alert($('#inpSearch').val()); 
      var search = $('#inpSearch').val(); 
      TableData(search); 
      $('#expandabledatatable').Datatable().draw(); 
     }) 

が与えることに気づいた "にReferenceErrorを：TABLEDATAが定義されていません" というエラーが。だから私は関数を呼び出すことに問題があると思う。これはObject.fromQueryString() from sugar.js、役に立つもののすべての種類を提供しています非常に便利なライブラリを使用していることを

$(document).ready(function() { 
    var url = Object.fromQueryString(window.location.search); 

    $.extend(true, $.fn.dataTable.defaults, { 
     searching: false, 
     ordering: false 
    }); 

    $('#btnSearch').click(function() { 
     doSearch($('#inpSearch').val(), url.Type, url.DocumentTypeId); 
    }); 

    // click the button (do a search) on page load once 
    $('#btnSearch').click(); 
}); 

注：

Answer 1

は、次の試してみてください。あなたのgetUrlParameter()機能が壊れていて、それを修正する価値がないので、それを含めました。 URLパーサーは既に書かれており、既存のものを使用します。

依存関係の数を増やしたくない場合は、おそらくmoment.jsをthe Date functions provided by sugar.jsに置き換えることができます。

引数に渡すもの以外のデータに依存しないdoSearch()関数を作成しました。このようにして、関数をもっと簡単に再利用することができます。

のDataTable（ `$（「＃のexpandabledatatable」）行って、ちょうど

function doSearch(searchInput, documentTypeId, type) { 
    var dataSourceUrl; 

    switch (type) { 
     case 1: dataSourceUrl = "@Url.Action(Inbox ? "ERPListByType" : "OutboxList" ,"Folder")"; break; 
     case 2: dataSourceUrl = "@Url.Action(Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; break; 
     case 3: dataSourceUrl = "@Url.Action(Inbox ? "OutboxListByType" : "OutboxList" ,"Folder")"; break; 
     case 4: dataSourceUrl = "@Url.Action(Inbox ? "DeletedDocumentsList" : "OutboxList" ,"Folder")"; break; 
     default: dataSourceUrl = "@Url.Action(Inbox ? "InboxListByType" : "OutboxList" ,"Folder")"; break; 
    } 

    if ($.fn.dataTable.isDataTable('#expandabledatatable')) { 
     $('#expandabledatatable').dataTable().fnDestroy(); 
    } 
    $('#expandabledatatable').dataTable({ 
     //sDom: "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>", 
     //processing: true, 
     //info: false, 
     serverSide: true, 
     ajax: { 
      url: dataSourceUrl, 
      data: { DocumentTypeId: documentTypeId, searchInput: searchInput }, 
      type: "POST" 
     }, 
     // etc ... 
    }); 
}