lavkach3

1
//
2
// Add Row
3
//
4
var t = $("#t_add_row").DataTable();
5
var counter = 1;
6

7
$("#addRow").on("click", function () {
8
  t.row
9
    .add([
10
      counter + ".1",
11
      counter + ".2",
12
      counter + ".3",
13
      counter + ".4",
14
      counter + ".5",
15
    ])
16
    .draw(false);
17

18
  counter++;
19
});
20

21
// Automatically add a first row of data
22
$("#addRow").click();
23

24
//
25
// Individual column searching (select inputs)       //
26
//
27

28
$(".datatable-select-inputs").DataTable({
29
  initComplete: function () {
30
    this.api()
31
      .columns()
32
      .every(function () {
33
        var column = this;
34
        var select = $(
35
          '<select class="form-select"><option value="">Select option</option></select>'
36
        )
37
          .appendTo($(column.footer()).empty())
38
          .on("change", function () {
39
            var val = $.fn.dataTable.util.escapeRegex($(this).val());
40

41
            column.search(val ? "^" + val + "$" : "", true, false).draw();
42
          });
43

44
        column
45
          .data()
46
          .unique()
47
          .sort()
48
          .each(function (d, j) {
49
            select.append('<option value="' + d + '">' + d + "</option>");
50
          });
51
      });
52
  },
53
});
54

55
//
56
// Individual column searching (text inputs)        //
57
//
58
// Setup - add a text input to each footer cell
59
$(".text-inputs-searching tfoot th").each(function () {
60
  var title = $(this).text();
61
  $(this).html(
62
    '<input type="text" class="form-control" placeholder="Search ' +
63
      title +
64
      '" />'
65
  );
66
});
67

68
// DataTable
69
var tableSearching = $(".text-inputs-searching").DataTable();
70

71
// Apply the search
72
tableSearching.columns().every(function () {
73
  var that = this;
74

75
  $("input", this.footer()).on("keyup change", function () {
76
    if (that.search() !== this.value) {
77
      that.search(this.value).draw();
78
    }
79
  });
80
});
81

82
//
83
// Child rows (show extra / detailed information)   //
84
//
85
/* Formatting function for row details - modify as you need */
86
function format(d) {
87
  // `d` is the original data object for the row
88
  return (
89
    '<table class="table" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
90
    "<tr>" +
91
    "<td>Full name:</td>" +
92
    "<td>" +
93
    d.name +
94
    "</td>" +
95
    "</tr>" +
96
    "<tr>" +
97
    "<td>Extension number:</td>" +
98
    "<td>" +
99
    d.extn +
100
    "</td>" +
101
    "</tr>" +
102
    "<tr>" +
103
    "<td>Extra info:</td>" +
104
    "<td>And any further details here (images etc)...</td>" +
105
    "</tr>" +
106
    "</table>"
107
  );
108
}
109

110
//=============================================//
111
// -- Child rows
112
//=============================================//
113
var tableChildRows = $(".show-child-rows").DataTable({
114
  ajax: "https://api.npoint.io/b9d05e59af5e9db4a3c2",
115
  columns: [
116
    {
117
      className: "details-control",
118
      orderable: false,
119
      data: null,
120
      defaultContent: "",
121
    },
122
    { data: "name" },
123
    { data: "position" },
124
    { data: "office" },
125
    { data: "salary" },
126
  ],
127
  order: [[1, "asc"]],
128
});
129

130
//=============================================//
131
// Add event listener for opening and closing details
132
//=============================================//
133
$(".show-child-rows tbody").on("click", "td.details-control", function () {
134
  var tr = $(this).closest("tr");
135
  var row = tableChildRows.row(tr);
136

137
  if (row.child.isShown()) {
138
    // This row is already open - close it
139
    row.child.hide();
140
    tr.removeClass("shown");
141
  } else {
142
    // Open this row
143
    row.child(format(row.data())).show();
144
    tr.addClass("shown");
145
  }
146
});
147

148
//
149
//          Row selection (multiple rows)           //
150
//
151
var table1 = $("#row_select").DataTable();
152

153
$("#row_select tbody").on("click", "tr", function () {
154
  $(this).toggleClass("selected");
155
});
156

157
$("#button").click(function () {
158
  alert(table1.rows(".selected").data().length + " row(s) selected");
159
});
160

161
//
162
//              Form Inputs                         //
163
//
164

165
var table2 = $("#form_inputs").DataTable();
166

167
$(".inputs-submit").click(function () {
168
  var data = table2.$("input, select").serialize();
169
  alert(
170
    "The following data would have been submitted to the server: \n\n" +
171
      data.substr(0, 120) +
172
      "..."
173
  );
174
  return false;
175
});
176

177
//
178
//  Row selection and deletion (single row)         //
179
//
180
var table3 = $("#sing_row_del").DataTable();
181

182
$("#sing_row_del tbody").on("click", "tr", function () {
183
  if ($(this).hasClass("selected")) {
184
    $(this).removeClass("selected");
185
  } else {
186
    table3.$("tr.selected").removeClass("selected");
187
    $(this).addClass("selected");
188
  }
189
});
190

191
$("#delete-row").click(function () {
192
  table3.row(".selected").remove().draw(false);
193
});
194