title: C# ASP.net MVC Ajax MySQL DATATABLES Column searching can't pass search value to Controller
body: <p><strong>Trying to Achieve</strong></p>
  
  <p>Using Datatable, I am trying to implement column searching. I wish to pass <code>search[value]</code> and <code>column index</code> to <code>Controller</code> where I have a <code>filter method</code> that will filter and load the list.</p>
  
  <p><a href="https://i.stack.imgur.com/mLGGL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mLGGL.png" alt="Table"></a></p>
  
  <p><strong>What I have tried</strong></p>
  
  <p>With the following code, I bind <code>keyup change</code> to each column. During <code>keyup change</code>, I managed to get <code>valueData</code> and <code>column index</code> from the table </p>
  
  <pre><code>    table.columns().eq(0).each(function (colIdx) {
  
          $('input', $('.filters td')[colIdx]).bind('keyup change', function () {
              var searchColIndex = $(this).parent().index();
              //=== During keyup or change, it will go through each column
              var columnIndex = colIdx;
  
              //=== When the searchCol matches the columnIndex
              if (searchColIndex == columnIndex) {
                  //=== Ideally will call Draw and pass the value to Controller
                  var valuedata = $(this).val();
                  //table.column(0).search($(this).val()).draw();
                  table
                   .column(colIdx)
                   .search(valuedata)
                   .draw();
              }
  
          });
      });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Pe2DU.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Pe2DU.gif" alt="KeyUpTriggerAndGetValue"></a></p>
  
  <p><strong><code>Controllers</code> could not manage to get the <code>search value</code> or <code>column index</code></strong></p>
  
  <p><a href="https://i.stack.imgur.com/nEeum.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nEeum.gif" alt="Controllers"></a></p>
  
  <p><strong>But if I search at the top right hand corner search box, <code>Controllers</code> able to request the value</strong></p>
  
  <p><a href="https://i.stack.imgur.com/OFEhA.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OFEhA.gif" alt="TopRightSearchWillGetValues"></a></p>
  
  <p><strong>Code</strong>
  <a href="https://github.com/BROMVC5/BROSTANDARD.git" rel="nofollow noreferrer">https://github.com/BROMVC5/BROSTANDARD.git</a></p>
  
  <p><strong>Suggested by Murat</strong></p>
  
  <pre><code>    var table = $('#tablePassword').DataTable({
  
          "paging": true,
          "ordering": true,
          "processing": true, // control the processing indicator.
          "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
          "info": true,   // control table information display field
          "lengthChange": true,
          "lengthMenu": [[5, 20, 50, -1], [5, 20, 50, "All"]],    // use the first inner array as the page length values and the second inner array as the displayed options
          "colReorder": true,
          "orderMulti": true, // for disable multiple column at once
  
          "language": {
              searchPlaceholder: "Search records"
          },
  
          "order": [["3", "desc"]], //=== Not working during stateSave
  
          //"ajax":{
          //    "url": "/Password/AjaxGetJsonData",
          //    "type": "POST"
          //},
          "AjaxSource": "/Password/AjaxGetJsonData",
          "fnServerData": function (sSource, aoData, fnCallback) {
              aoData.push({ "name": "all", "value": true });
              $.getJSON(sSource, aoData, function (json) {
                  fnCallback(json)
              });
          },
  
          //*** Added the following code ****
          "columnDefs": [
              {
                  "width": "5%", "targets": 'NumCol', "data": "id",
                  "orderable": false,
                  "render": function (data, type, row, meta) {
                      return meta.row + meta.settings._iDisplayStart + 1;
                  }
              },
              {
                  "targets": 'LoginCol', 
                  "data": "LoginID", "orderable": true
              },
              {
                  "targets": 'NameCol', 
                  "data": "Name", "orderable": true
              },
              {
                  "targets": 'DtCreatedCol', 
                  "data": "DateCreated", "orderable": true
              },
              {
                  "targets": 'EditCol', // The third column
                  "className": "text-center",
                  "orderable": false,
                  "render": function (data, type, full, meta) {
                      return '&lt;a href="/Password/PasswordDet/' + full.AutoINC + '"&gt;&lt;img src="../../Content/myPics/edit-2-24.png" &gt;&lt;/a&gt;';
                  }
              }
          ],
  
     });
  
  
     $('body').on('click', '#btnGet', function () {
  
          //to get currently clicked row object
          var row = $(this).parents('tr')[0];
  
          //to get currently clicked row data
          var rowData = table.row(row).data();
  
          //to get currently clicked row id (first column value (at index [0])
          var rowId = rowData[0];
  
          var row = $(this).closest("tr"),            // Finds the closest row &lt;tr&gt;
          rowId = row.find("td:nth-child(1)").text();
      });
  </code></pre>
  
  <p><strong>Suggested by Murat Controller is not called and hang</strong></p>
  
  <p><a href="https://i.stack.imgur.com/vQHqM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vQHqM.gif" alt="ControllersNotCalled"></a></p>