Datatable Multi-Filter-Eingänge vor jedem td jquery css

Question

wie Sie solche Datentabelle erstellen, so dass Eingabefelder an der Spitze jeder Spalte sein müssen.

Ich habe alles bisher versucht, aber nicht für mich gearbeitet. Ich möchte Eingabefelder wie am Anfang einer Spalte, aber nach Kopfzeilen hinzufügen. Jede Hilfe wird dank geschätzt werden

UPDATE:

js.file

snapshots_table = undefined 
nextImage = undefined 
that = undefined 

sendAJAXRequest = (settings) -> 
    token = $('meta[name="csrf-token"]') 
    if token.size() > 0 
    headers = 
     "X-CSRF-Token": token.attr("content") 
    settings.headers = headers 
    xhrRequestChangeMonth = jQuery.ajax(settings) 
    true 

initializeDataTable = -> 
    snapshots_table = $("#snapshots_datatables").DataTable 
    aaSorting: [1, "asc"] 
    aLengthMenu: [ 
     [25, 50, 100, 200, -1] 
     [25, 50, 100, 200, "All"] 
    ] 
    columns: [ 
     {data: "0", sWidth: "110px" }, 
     {data: "1", sWidth: "150px" }, 
     {data: "2", visible: false, sClass: "center", sWidth: "60px" }, 
     {data: "3", visible: false, sWidth: "105px" }, 
     {data: "4", sClass: "center", sWidth: "65px" }, 
     {data: "5", sClass: "center", sWidth: "60px" }, 
     {data: "6", sClass: "center", sWidth: "95px" }, 
     {data: "7", sClass: "center", sWidth: "100px" }, 
     {data: "8", visible: false, sWidth: "115px" }, 
     {data: "9", "render": colorStatus, sClass: "center", sWidth: "50px" }, 
     {data: "10", visible: false, sWidth: "105px" }, 
     {data: "11", visible: false, sClass: "center", sWidth: "55px" }, 
     {data: "12", visible: false, sClass: "center", sWidth: "75px"}, 
     {data: "13", sClass: "center", sWidth: "65px", "render": colorStatus } 
    ], 
    iDisplayLength: 50 
    columnDefs: [ 
     type: "date-uk" 
     targets: 'datatable-date' 
    ], 
    "oLanguage": { 
     "sSearch": "Filter:" 
    }, 
    initComplete: -> 
     $("#snapshots-list-row").removeClass('hide') 
     $("#snapshots_datatables_filter").addClass("hide") 
     $("#snapshots_datatables_length label").hide() 
     $("#div-dropdown-checklist").css({"visibility": "visible", "width": "59px", "top": "1px", "float": "right" }) 

columnsDropdown = -> 
    $(".cameras-column").on "click", -> 
    column = snapshots_table.column($(this).attr("data-val")) 
    column.visible !column.visible() 

colorStatus = (name) -> 
    if name is "t" 
    return "<span style='color: green;'>True</span>" 
    else if name is "f" 
    return "<span style='color: red;'>False</span>" 

onIntercomClick = -> 
    $("#snapshots_datatables").on "click", ".open-intercom", -> 
    $('#api-wait').show() 
    data = {} 
    data.username = $(this).data("username") 
    onError = (jqXHR, status, error) -> 
     Notification.show(jqXHR.text) 

    onSuccess = (result, status, jqXHR) -> 
     $('#api-wait').hide() 
     if result is null 
     $(".bb-alert") 
      .addClass("alert-danger") 
      .text("User doesn't exist on Intercom") 
      .delay(200) 
      .fadeIn() 
      .delay(4000) 
      .fadeOut() 
     else 
     appId = result.app_id 
     id = result.id 
     newWindow = window.open("","_blank") 
     newWindow.location.href = "https://app.intercom.io/a/apps/#{appId}/users/#{id}/all-conversations" 

    settings = 
     cache: false 
     data: data 
     dataType: 'json' 
     error: onError 
     success: onSuccess 
     contentType: "application/x-www-form-urlencoded" 
     type: "get" 
     url: "/intercom/user" 

    sendAJAXRequest(settings) 

onSearch = -> 
    $("#camera-name").on 'keyup change', -> 
    snapshots_table 
     .column(0) 
     .search(@value) 
     .draw() 
    $("#owner").on 'keyup change', -> 
    snapshots_table 
     .column(1) 
     .search(@value) 
     .draw() 
    $("#status").on 'keyup change', -> 
    snapshots_table 
     .column(4) 
     .search(@value) 
     .draw() 
    $("#duration").on 'keyup change', -> 
    snapshots_table 
     .column(5) 
     .search(@value) 
     .draw() 
    $("#online").on 'keyup change', -> 
    snapshots_table 
     .column(9) 
     .search(@value) 
     .draw() 

onImageHover = -> 
    $("#snapshots_datatables").on "mouseover", ".thumbnails", -> 
    that = this 
    nextImage = $(this).siblings(".full-image") 
    $(".div-elms").html(nextImage.show()) 
    $(".div-elms").show() 
    $("#snapshots_datatables").on "mouseout", ".thumbnails", -> 
    $(nextImage).css("display": "none") 
    $(that).after(nextImage) 
    $(".div-elms").html("") 
    $(".div-elms").hide() 

window.initializSnapshots = -> 
    columnsDropdown() 
    initializeDataTable() 
    onIntercomClick() 
    onSearch() 
    onImageHover() 

HTML.file

<div class="bb-alert alert" style="display: none;"></div> 
<img src="<%= image_path 'loading.gif' %>" id="api-wait" style="display:none" /> 
<div class="div-elms">me</div> 
<!-- BEGIN CONTENT --> 
<div class="page-content-wrapper"> 
    <div class="page-content" id="snapshots-report"> 
    <!-- BEGIN PAGE HEADER--> 
    <div class="row overlop-margin"> 
     <div class="dropdown-checklist" id="div-dropdown-checklist"> 
     <div href="#" class="btn btn-default grey" data-toggle="modal" data-target="#toggle-datatable-columns"> 
      <i class="fa fa-columns"></i> 
     </div> 
     </div> 
    </div> 
    <!-- END PAGE HEADER--> 
    <!-- BEGIN PAGE CONTENT--> 
    <div class="row overlapping"> 
     <div class="form-mains"> 
     <div class="main-contains"> 
      <div class="filter-naming"> 
      Search : 
      </div> 
      <div class="inputs-divs"> 
      <input type="text" class="first-inps" placeholder="Search Camera" id="camera-name"> 
      <input type="text" class="first-inps" placeholder="Search Onwer" id="owner"> 
      <input type="text" class="first-inps" placeholder="Search Status" id="status"> 
      <input type="text" class="first-inps" placeholder="Search Duration" id="duration"> 
      <input type="text" class="first-inps" placeholder="Search Online" id="online"> 
      </div> 
     </div> 
     </div> 
    </div> 
    <%= render 'columns_modal' %> 
    <div id="snapshots-list-row" class="row hide dt-user-m snapshots-list-row"> 
     <div class="col-md-12 filter-top"> 
     <table class="table table-striped table-bordered table-hover snapshots-datatables" id="snapshots_datatables"> 
      <thead> 
      <tr role="row" class="heading"> 
      <th name="order_name" class="sorting">Name</th> 
      <th name="order_owner" class="sorting">Owner</th> 
      <th name="order_count" class="sorting">Count</th> 
      <th name="order_oldest_snapshot" class="sorting">Oldest Snapshot</th> 
      <th name="order_cr_status" class="sorting">Status</th> 
      <th name="order_cr_duration" class="sorting">Duration</th> 
      <th name="order_cr_interval" class="sorting">Interval #/min</th> 
      <th name="order_cr_schedule_hpw" class="sorting">Schedule HPW</th> 
      <th name="order_new_60min" class="sorting">New in last 60min</th> 
      <th name="order_cam_status" class="sorting">Online</th> 
      <th name="order_cam_exid" class="sorting">Camera Id</th> 
      <th name="order_cam_user_id" class="sorting">User Id</th> 
      <th name="order_cam_thumbail" class="sorting">Thumbnail</th> 
      <th name="order_cam_licenced" class="sorting">Licenced</th> 
      </tr> 
      </thead> 
      <tbody> 
      <% @cameras.each do |camera| %> 
      <tr> 
       <td><a href="/cameras/<%= camera["cam_id"] %>"><%= camera["name"] %></a></td> 
       <td> 
       <div class='link-user'> 
        <a href="https://stackoverflow.com/users/<%= camera["user_id"] %> " class="pull-left"><%= "#{camera["firstname"]} #{camera["lastname"]}" %></a> 
        <a class='pull-right u-dash' href='<%= check_env %>/v1/cameras/<%= camera["exid"] %>?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>' target='_blank'><i class='fa fa-external-link'></i></a> 
        <a tooltip='Intercom Conversation' class='pull-right open-intercom' data-username="<%= camera["username"] %>"><i class='fa fa-comment-o'></i></a> 
       </div> 
       </td> 
       <td>0</td> 
       <td></td> 
       <td> 
       <%= camera["status"].titleize %> 
       </td> 
       <td> 
       <% if camera["storage_duration"] == "-1" %> 
        Infinity 
       <% elsif camera["storage_duration"] == "1" %> 
        24 
       <% else %> 
        <%= camera["storage_duration"] %> 
       <% end %> 
       </td> 
       <td> 
       <% case camera["frequency"] 
        when "60" %> 
         60 
       <% when "30" %> 
         30 
       <% when "12" %> 
         12 
       <% when "6" %> 
         6 
       <% when "1" %> 
         1 
       <% end %> 
       </td> 
       <td> 
       <% unless raw(camera["schedule"]).eql?({"Monday":["0:0-23:59"],"Tuesday":["0:0-23:59"],"Wednesday":["0:0-23:59"],"Thursday":["0:0-23:59"],"Friday":["0:0-23:59"],"Saturday":["0:0-23:59"],"Sunday":["0:0-23:59"]}) %> 
        <% schedule = JSON.parse(camera["schedule"]) %> 
        <%= get_hours(schedule) %> 
       <% end %> 
       </td> 
       <td></td> 
       <td> <%= camera["is_online"] %> </td> 
       <td> <%= camera["exid"] %> </td> 
       <td> <%= camera["user_id"] %> </td> 
       <td> 
       <% if camera["is_public"] == "t" %> 
        <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" height="32" class="thumbnails"> 
        <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?" class="full-image" width="100%"> 
       <% else %> 
        <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" height="32" class="thumbnails"> 
        <img src="https://media.evercam.io/v1/cameras/<%= camera["exid"] %>/thumbnail?api_id=<%= camera["api_id"] %>&api_key=<%= camera["api_key"] %>" class="full-image" width="100%"> 
       <% end %> 
       </td> 
       <td> 
       <% if camera["licences"].nil? %> 
        f 
       <% elsif camera["total_cameras"].to_i < camera["licences"].to_i %> 
        t 
       <% elsif camera["total_cameras"].to_i > camera["licences"].to_i %> 
        f 
       <% elsif camera["total_cameras"].to_i == camera["licences"].to_i %> 
        t 
       <% end %> 
       </td> 
      </tr> 
      <% end %> 
      </tbody> 
     </table> 
     </div> 
    </div> 
    <!-- END PAGE CONTENT--> 
    </div> 
</div> 
<!-- END CONTENT --> 

<script> 
    $(document).ready(function() { 
    window.initializSnapshots(); 
    }); 
</script> 

Answer 1

dieses Skript hinzufügen, die die Eingänge für einzelne Spalten hinzufügen.

var newTr = $('<tr></tr>'); 
$('#snapshots_datatables thead th').each(function() {   
    var title = $(this).text(); 
    newTr.append('<th><input type="text" placeholder="Search '+title+'" /></th>'); 
    $('#snapshots_datatables thead').append(newTr); 
}); 

---

Edit 1: Wenn Ihre Absicht, die imput nur eine Spalte hinzuzufügen, ist dann wie unten tun Sie müssen.

 <thead> 
      <tr role="row" class="heading"> 
      <th name="order_name" class="sorting">Name</th> 
      <th name="order_owner" class="sorting">Owner</th> 
      <th name="order_count" class="sorting">Count</th> 
      <th name="order_oldest_snapshot" class="sorting">Oldest Snapshot</th> 
      <th name="order_cr_status" class="sorting">Status</th> 
      <th name="order_cr_duration" class="sorting">Duration</th> 
      <th name="order_cr_interval" class="sorting">Interval #/min</th> 
      <th name="order_cr_schedule_hpw" class="sorting">Schedule HPW</th> 
      <th name="order_new_60min" class="sorting">New in last 60min</th> 
      <th name="order_cam_status" class="sorting">Online</th> 
      <th name="order_cam_exid" class="sorting">Camera Id</th> 
      <th name="order_cam_user_id" class="sorting">User Id</th> 
      <th name="order_cam_thumbail" class="sorting">Thumbnail</th> 
      <th name="order_cam_licenced" class="sorting">Licenced</th> 
      </tr> 
      <tr role="row" class="heading"> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th><input type="text" class="first-inps" placeholder="Search Camera" id="camera-name"></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      </tr> 
     </thead>