datatables individuelle Spaltensuche Funktionalität

Question

Ich benutze Datatables in meiner Anwendung und es funktioniert gut, jedoch möchte ich die Möglichkeit implementieren, einzelne Spalten der Tabelle zu durchsuchen. Ich fand this page und kann es mit dem hartcodierten Datenbeispiel arbeiten, jedoch habe ich Probleme, es auf meinen bestimmten Code anzuwenden (ich benutze eine API, um die Tabelle zu füllen). Mein aktueller Code, der ohne individuelle Spaltensuche funktioniert, ist unten, danke im Voraus.

$(document).ready(function() { 
 
    var table = $("#notifications").DataTable({ 
 
    ajax: { 
 
     url: "/api/notification", 
 
     dataSrc: "" 
 
    }, 
 
    columns: [{ 
 
     data: "id", 
 
     render: function(data, type, notification) { 
 
      return "<a href='/notifications/NewSubmission/" + notification.id + "'>" + notification.id + "</a>"; 
 
     } 
 

 
     }, 
 

 
     { 
 
     data: "address1", 
 

 
     }, 
 
     { 
 
     data: "address2", 
 

 
     }, 
 
     { 
 
     data: "address3", 
 

 
     }, 
 

 
     { 
 
     data: "town", 
 

 
     }, 
 
     { 
 
     data: "county", 
 

 
     }, 
 
     { 
 
     data: "postCode", 
 

 
     }, 
 
     { 
 
     data: "local.name", 
 

 
     }, 
 

 
     { 
 
     data: "id", 
 
     render: function(data) { 
 
      return "<button class='btn-link js-delete' data-notification-id=" + data + ">Delete</button>"; 
 
     } 
 

 
     } 
 

 
    ] 
 

 
    }); 
 

 
    $("#notifications").on("click", ".js-delete", function() { 
 
    var button = $(this); 
 

 
    bootbox.confirm("Are you sure you want to delete this notification?", function(result) { 
 
     if (result) { 
 

 
     $.ajax({ 
 
      url: "/api/notification/" + button.attr("data-notification-id"), 
 
      method: "DELETE", 
 
      success: function() { 
 
      table.row(button.parents("tr")).remove().draw(); 
 

 
      } 
 
     }); 
 
     } 
 
    }); 
 
    }); 
 
});

<h2>Index</h2> 
 

 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
 
<meta name="viewport" content="width=device-width,initial-scale=1"> 
 
<title>DataTables example - Individual column searching (text inputs)</title> 
 
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png"> 
 
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml"> 
 
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=170d96f69db52446b9aa21d2653da1f4"> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 
 
<style type="text/css" class="init"> 
 
    tfoot input { 
 
    width: 100%; 
 
    padding: 3px; 
 
    box-sizing: border-box; 
 
    } 
 
</style> 
 
<script type="text/javascript" src="/media/js/site.js?_=2ec2144600499da11df5c1cee6ac09df"> 
 
</script> 
 
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fapi%2Fmulti_filter.html" async> 
 
</script> 
 
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> 
 
</script> 
 
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"> 
 
</script> 
 
<script type="text/javascript" language="javascript" src="../resources/demo.js"> 
 
</script> 
 

 

 
<table id="notifications" class="table table table-bordered table-hover"> 
 
    <thead> 
 

 
    <tr> 
 

 
     <th>Id</th> 
 
     <th>Address Line 1</th> 
 
     <th>Address Line 2</th> 
 
     <th>Address Line 3</th> 
 
     <th>Town</th> 
 
     <th>County</th> 
 
     <th>Post Code</th> 
 
     <th>Local Authority</th> 
 
     <th>Delete</th> 
 

 
    </tr> 
 

 
    </thead> 
 

 
</table>

Answer 1

Arbeitsversion

<h2>Index</h2> 

    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1"> 
    <title>DataTables example - Individual column searching (text inputs)</title> 
    <link rel="shortcut icon" type="image/png" href="/media/images/favicon.png"> 
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml"> 
    <link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=170d96f69db52446b9aa21d2653da1f4"> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> 
    <style type="text/css" class="init"> 
     tfoot input { 
      width: 100%; 
      padding: 3px; 
      box-sizing: border-box; 
     } 
    </style> 
    <script type="text/javascript" src="/media/js/site.js?_=2ec2144600499da11df5c1cee6ac09df"> 
    </script> 
    <script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fapi%2Fmulti_filter.html" async> 
    </script> 
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"> 
    </script> 
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"> 
    </script> 
    <script type="text/javascript" language="javascript" src="../resources/demo.js"> 
    </script> 
    <script type="text/javascript" class="init"> 


     $(document).ready(function() { 
      $('#notifications tfoot th').each(function() { 
       var title = $(this).text(); 
       $(this).html('<input type="text" placeholder="Search ' + title + '" />'); 
      }); 

      var table = $("#notifications").DataTable({   

        ajax: { 
         url: "/api/notification", 
         dataSrc: "" 
        }, 

        columns: [ 
         { 
          data: "id", 
          render: function (data, type, notification) { 
           return "<a href='/notifications/NewSubmission/" + notification.id + "'>" + notification.id + "</a>"; 
          } 

         }, 

         { 
          data: "address1", 

         }, 
         { 
          data: "address2", 

         }, 
         { 
          data: "address3", 

         }, 

         { 
          data: "town", 

         }, 
         { 
          data: "county", 

         }, 
          { 
           data: "postCode", 

          }, 
         { 
          data: "local.name", 

         }, 

        { 
         data: "id", 
         render: function (data) { 
          return "<button class='btn-link js-delete' data-notification-id=" + data + ">Delete</button>"; 
         } 

        } 

        ] 


      }); 
      table.columns().every(function() { 
       var that = this; 

       $('input', this.footer()).on('keyup change', function() { 
        if (that.search() !== this.value) { 
         that 
          .search(this.value) 
          .draw(); 
        } 
       }); 
      }); 
     }); 

          $("#notifications").on("click", ".js-delete", function() { 
           var button = $(this); 

           bootbox.confirm("Are you sure you want to delete this notification?", function (result) { 
            if (result) { 

             $.ajax({ 
              url: "/api/notification/" + button.attr("data-notification-id"), 
              method: "DELETE", 
              success: function() { 
               table.row(button.parents("tr")).remove().draw(); 

              } 
             }); 
            } 
           }); 
          });  

    </script> 

    <table id="notifications" class="table table table-bordered table-hover"> 
     <thead> 

      <tr> 

       <th>Id</th> 
       <th>Address Line 1</th> 
       <th>Address Line 2</th> 
       <th>Address Line 3</th> 
       <th>Town</th> 
       <th>County</th> 
       <th>Post Code</th> 
       <th>Local Authority</th> 
       <th>Delete</th> 

      </tr> 

     </thead> 
     <tfoot> 
      <tr> 
       <th>Id</th> 
       <th>Address Line 1</th> 
       <th>Address Line 2</th> 
       <th>Address Line 3</th> 
       <th>Town</th> 
       <th>County</th> 
       <th>Post Code</th> 
       <th>Local Authority</th> 
       <th>Delete</th> 
      </tr> 
     </tfoot> 

    </table>