鼠标悬停的JQuery不适用于dataTables

时间:2017-06-20 06:24:37

标签: jquery datatables

以下是我的HTML代码

<article class="container content col-xs-12 col-sm-9 col-md-10 col-lg-10">
      <div class="x_panel well">
        <div class="x_content">
          <table id="datatable-buttons" class="table table-striped table-bordered">
              <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
              </thead>
              <tbody></tbody>
              <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
              </tfoot>
          </table>
        </div>
      </div>
  </article>

我使用下面的JSON数据填充了这个表是代码:

$(document).ready(function()
{
  function init_DataTables()
    {
      console.log('run_datatables');

      if( typeof ($.fn.DataTable) === 'undefined'){ return; }
      console.log('init_DataTables');

      var handleDataTableButtons = function() {
        if ($("#datatable-buttons").length){
          $("#datatable-buttons").DataTable({
                                              dom: "Bfrtip",
                                              buttons: [
                                                  {
                                                      extend: "copy",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "csv",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "excel",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "pdfHtml5",
                                                      className: "btn-sm"
                                                  },
                                                  {
                                                      extend: "print",
                                                      className: "btn-sm"
                                                  },
                                              ],
                                              "aaData": [
                                                  {
                                                      "Name": "Tiger Nixon",
                                                      "Position": "System Architect",
                                                      "Office": "$320,800",
                                                      "Age": "2011/04/25",
                                                      "Start date": "Edinburgh",
                                                      "Salary": "5421"
                                                  },
                                                  {
                                                      "Name": "Garrett Winters",
                                                      "Position": "Accountant",
                                                      "Office": "$170,750",
                                                      "Age": "2011/07/25",
                                                      "Start date": "Tokyo",
                                                      "Salary": "8422"
                                                  },
                                                  {
                                                      "Name": "Ashton Cox",
                                                      "Position": "Junior Technical Author",
                                                      "Office": "$86,000",
                                                      "Age": "2009/01/12",
                                                      "Start date": "San Francisco",
                                                      "Salary": "1562"
                                                  },
                                                  {
                                                      "Name": "Cedric Kelly",
                                                      "Position": "Senior Javascript Developer",
                                                      "Office": "$433,060",
                                                      "Age": "2012/03/29",
                                                      "Start date": "Edinburgh",
                                                      "Salary": "6224"
                                                  }
                                              ],
                                              "aoColumns": [
                                                  { "mData": "Name" },
                                                  { "mData": "Position" },
                                                  { "mData": "Office" },
                                                  { "mData": "Age" },
                                                  { "mData": "Start date" },
                                                  { "mData": "Salary" }
                                              ],
                                              responsive: true
                                            });
        }
      };

      TableManageButtons = function()
        {
          "use strict";
          return {
          init: function() {
            handleDataTableButtons();
          }
          };
        }();

      $('#datatable-scroller').DataTable({
        ajax: "js/datatables/json/scroller-demo.json",
        deferRender: true,
        scrollY: 380,
        scrollCollapse: true,
        scroller: true
      });

      var $datatable = $('#datatable-checkbox');

      $datatable.dataTable({
        'order': [[ 1, 'asc' ]],
        'columnDefs': [
        { orderable: false, targets: [0] }
        ]
      });

      $datatable.on('draw.dt', function()
        {
          $('checkbox input').iCheck({
          checkboxClass: 'icheckbox_flat-green'
          });
        });
      TableManageButtons.init();
    };

  init_DataTables();
});

我想要做的是当鼠标悬停在tr数据上但是它无法正常工作时,我想显示编辑或删除选项。可能是什么问题。

这是y JQUERY代码:

$("#datatable-buttons tbody tr").mouseover(function()
        {
            alert("hi");
        });

0 个答案:

没有答案