Question

如何创建此类数据表，以便输入字段必须位于每列的顶部。

到目前为止，我已经尝试了一切，但对我来说并不适用。我想在列的顶部添加输入字段，但是在标题之后。任何帮助将不胜感激

更新：

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="/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

添加此脚本，该脚本将添加各列的输入。

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);
});

编辑1：如果您打算将输入只添加到一列，则必须执行以下操作。

        <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>

每个td jquery css

1 个答案: