Question

I am using Jquery Datatable and on each td click I am trying to bind the current td value to the existing textbox. I am getting the div as popover but the value is not getting binded. Also on first click the popover is not getting displayed can some one help me

$(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() {});
  });
});

Fiddle on what I tried

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

您可以使用数据表的单元格方法来获取表单击的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");
    } );
} );

Jquery Datatable div as popover

2 个答案: