Блог

Главная - Вопросы по программированию - Как получить выбранные строки данных из jQuery DataTable

Как получить выбранные строки данных из jQuery DataTable

#jquery #asp.net-core #datatables

#jquery ( jquery ) #asp.net-ядро #таблицы данных

Вопрос:

Я внедряю asp.net основной проект 3.1. У меня есть представление, в котором есть таблица данных jQuery, и рядом со всеми его записями есть флажок. На мой взгляд, я должен реализовать 3 кнопки, каждая из которых имеет специальное действие для выбранных строк из таблицы данных. Например, если пользователь выбирает некоторые записи и нажимает на button1, я хочу, чтобы все эти выбранные строки отображались пользователю в модальном режиме. До сих пор я пытался получить выбранные элементы, но я не знаю, как я могу использовать ProductName, ApplicantName и ProductPrice каждой записи в модальном всплывающем окне. Вот что я попробовал:

 @model IEnumerable<Dashboard.Models.myModel>

<head>
    <link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="~/contents/Index.css" rel="stylesheet" type="text/css" />
    <link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>


<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery-ui.js"></script>

<script language="JavaScript" type="text/javascript" src="~/js/datatables.min.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/DataTable/DataTableCheckbox/dataTables.checkboxes.min.js"></script>
<script>

    jQuery(document).ready(function ($) {

        $("#myDummyTable").DataTable({

            
                    'columnDefs': [
               {
                  'targets': 0,
            "searching": false,
                  'checkboxes': {
                     'selectRow': true
                  }
               }
            ],
            'select': {
               'style': 'multi'
            },
            'order': [[1, 'asc']],

            "pagingType": "full_numbers"
        });

        var oTable = $("#myDummyTable").dataTable();
    $("#Button1").click(function () {
        $("input:checkbox", oTable.fnGetNodes()).each(function () {
            var tuisre = $(this).is(":checked");
            if (tuisre) {
                //var no = $(this).row( this ).data();
                //var no = $(this).parent().prev().prev().val();
                //alert("no:"   no   " is checked");

        // Here I need to know how I can get the selected rows data and display them on a bootstrap modal popup
            }
        })
    })

    });


    $('#request_layout').css({ "background-color": "rgb(50, 149, 155)" });

</script>


<div class="my-5 col-sm-12 p-4">
    <table id="myDummyTable" class="table m-table mytable table-striped table-bordered mb-4">
        <thead>
            <tr id="headerrow">
                <th>

                </th>
                <th>
                    Product Name
                </th>
                <th>
                    Applicant Name
                </th>
                <th>
                    Price
                </th>

                <th>
                    operations
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>

                        <input type="checkbox" />
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ProductName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ApplicantName)
                    </td>
                    <td>

                        @Html.DisplayFor(modelItem => item.ProductPrice)
                    </td>
                    
                    <td>
                        <a onclick="showInPopup('@Url.Action("AddOrEdit","Productapplicants",new {id=item.Id},Context.Request.Scheme)','edit')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i>Edit</a>|
                        <a onclick="showInPopup('@Url.Action("Details","Productapplicants",new {id=item.Id},Context.Request.Scheme)','Details')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i>Details</a>|

                        <form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
                            <input type="submit" value="Delete" class="btn btn-danger" />
                        </form>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<input id="Button1" type="button" value="button" />

Ответ №1:

Пожалуйста, проверьте следующий код. Он использует rows().nodes() вместо устаревшего fnGetNodes метода, который недоступен при использовании $().DataTable() конструктора (как это сделано в моем коде).

 $(document).ready(function() {

  var oTable = $("#myDummyTable").DataTable({
    select: {
      style: 'multi'
    }
  });

  $("#Button1").click(function() {

    $("input:checkbox", oTable.rows().nodes()).each(function() {

      if ($(this).is(":checked")) {

        var row = $(this).closest('tr');

        // output to the console the row data
        console.log(oTable.row($(row)).data());
      }
    });
  });

}); 
 <link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

<div>
  <div class="my-5 col-sm-12 p-4">
    <table id="myDummyTable" class="table m-table mytable table-striped table-bordered mb-4">
      <thead>
        <tr id="headerrow">
          <th></th>
          <th>Product Name</th>
          <th>Applicant Name</th>
          <th>Price</th>
          <th>operations</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" /></td>
          <td>Beer</td>
          <td>Smith</td>
          <td>35</td>
          <td>[buttons here ...]</td>
        </tr>
        <tr>
          <td><input type="checkbox" /></td>
          <td>Coke</td>
          <td>Pam</td>
          <td>22</td>
          <td>[buttons here ...]</td>
        </tr>
      </tbody>
    </table>
  </div>
  <input id="Button1" type="button" value="button" />
</div>