Jquery Datatable div 作为弹出框

Question

我正在使用 Jquery Datatable，每次点击 td 时，我都试图将当前的 td 值绑定到现有的文本框。我将 div 作为弹出框，但该值未绑定。同样在第一次单击时，弹出窗口没有显示出来，有人可以帮我吗

$(document).ready(function() {
  $('[data-toggle="popover"]').popover();
  $('#example').DataTable({
    responsive: true
  });
  $("#example").on("click", 'tr td:not(:first-child)', function() {
    $("#txtDynamic").val($(this).text());
    $('.change-trigger').not(this).popover('hide');
    $('.change-trigger').popover({
      placement: 'Right',
      html: true,
      content: function() {
        var content = '';
        content = $('#select-div').html();
        return content;
      }
    }).on('shown.bs.popover', function() {});
  });
});

摆弄我的尝试

http://jsfiddle.net/DorababuMeka/LcLxde5a/13/

Answer 1

要在第一次单击时显示弹出框，您需要执行 $('.change-trigger').popover("show");，因为默认情况下，弹出框只会在 $('.change-trigger') 单击时显示，而不是在其兄弟节点上显示。

如果您想保留弹出框并在单击时更新每个兄弟的文本，您可以执行以下操作：

$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
    $('#example').DataTable({
        responsive: true
    });
    $("#example").on("click", 'tr td:not(:first-child)', function() {
        $("#txtDynamic").val($(this).text());
        //get the .change-trigger of the parent tr
        var pop=$(this).siblings(".change-trigger");
        //hide all .change-trigger popovers except for the active one
        $('.change-trigger').not(pop).popover('hide');
        //show the popover
        pop.popover("show");
    });
    //you can create the popover outside td click
    $('.change-trigger').popover({
        placement: 'Right',
        html: true,
        content: function() {
            var content = '';
            //clone() get updated #txtDynamic value
            //contents() omits the class="invisible" of #select-div
            //html() always gets default input value on popover
            content = $('#select-div').clone().contents();
            return content;
        }
    }).on('shown.bs.popover', function() {});
    $(".change-trigger").off("click");//disable popover("show") on .change-trigger
});

http://jsfiddle.net/LcLxde5a/62/

Answer 2

你可以使用datatable的cell方法来获取一个表格被点击的td的值。这是js fiddle

    <input type="text" id="tdvalue">
    <table width="100%" id="example">
      <thead style="background:#C0C0C0;">
        <tr>
          <th style="padding-left: 15px;"> Id </th>
          <th> Product Name </th>
          <th> Total Events </th>
          <th> Total Revenue </th>
          <th> Rental Time </th>
        </tr>
      </thead>
      <tbody>
        <td data-content="Brielle Williamson" data-placement="bottom" rel="popover">Brielle Williamson</td>
      <td data-content="Integration Specialist" data-placement="bottom" rel="popover">Integration Specialist</td>
      <td data-content="$372,000" data-placement="bottom" rel="popover">$372,000</td>
      <td data-content="New York" data-placement="bottom" rel="popover">New York</td>
      <td data-content="4804" data-placement="bottom" rel="popover">4804</td>
    </tr>
      </tbody>

    </table>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

    $(document).ready(function() {
    var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'td', function () {
        value = table.cell( this ).data();
        $("#tdvalue").val(value);
        $(this).popover("show");
    } );
} );