Save selected checkboxes

alohas

var $j = jQuery.noConflict();

function getPax() {
  $(document).ready(function () {
    $j.dialog({
      title: "DataTable!",
      content:
        '<div class="table">' +
        '<table id="table_id" class="display">' +
        "<thead>" +
        "<tr>" +
        '<th><input type="checkbox"/></th>' +
        "<th>id</th>" +
        "<th>First Name</th>" +
        "<th>Last Name</th>" +
        "<th>Price</th>" +
        "<th>Currency</th>" +
        "<th>Code</th>" +
        "<th>Flightnumber</th>" +
        "<th>STD</th>" +
        "<th>Departure Airport</th>" +
        "<th>Arrival Airport</th>" +
        "</tr>" +
        "</thead>" +
        "<tbody>" +
        "<tr>" +
        '<td input type="checkbox"></td>' +
        "</tr>" +
        "</tbody>" +
        "</table>" +
        "</div> ",
      onOpenBefore: function () {
        var test = $j("#table_id").DataTable({
          processing: true,

          ajax: {
            url: "",
            method: "GET",
            timeout: 0,
            headers: {
              Authorization: "",
              Cookie:
                "",
            },
            dataSrc: "products",
            dataType: "JSON",
          },
          dom: "frtBip",
          buttons: [
            {
              text: "My button",
              action: function (e, dt, node, config) {
                var productNames;
                var test2 = test.rows({ selected: true }).data().toArray();

                $.each(test2, function (index, item) {
                  if (index == 0) {
                    productNames = `${test2[index].passengerFirstName}`;
                  } else {
                    productNames =
                      productNames +
                      ", " +
                      `${test2[index].passengerFirstName}`;
                  }
                });
                $(".productList").val(productNames);
              },
            },
          ],

          columnDefs: [
            {
              orderable: false,
              targets: 0,
              className: "select-checkbox",
              visible: true,
            },
          ],
          columns: [
            { data: null, defaultContent: "" },
            { data: "id" },
            { data: "passengerFirstName" },
            { data: "passengerLastName" },
            { data: "price" },
            { data: "currency" },
            { data: "code" },
            { data: "flightNumber" },
            { data: "std" },
            { data: "departureAirport" },
            { data: "arrivalAirport" },
          ],
          select: {
            style: "multi",
            selector: "td:first-child",
          },
        });
        var rows = test.rows( { selected: true } ).indexes();
        test.rows(rows).select();
      },
    });
  });
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Where do you want to save the checked (selected) rows? In a server side database, using stateSave, etc? Please provide more details of what you want to do,

Kevin

alohas

So basically I am getting data using Ajax get method in displaying them in Datatables and then store checked values in text field.

What I want to achieve is when I open datatables once again those values which is in text field will be already pre selected.

colin

This example from this thread shows how this can be done using the Select extension.

Colin

alohas

@colin Thank you very much, this will work!