Replies

• sandy Posts: 913Questions: 0Answers: 236

  August 2019

  Hi bhargavakl,

  I'm afraid that at the moment DataTables does not support this using the API or otherwise. It is however possible to accomplish this by writing your own function. You would need to define your own search box too.

  You can find some details on writing a custom filtering function here.

  Thanks,

  Sandy
• bhargavakl Posts: 6Questions: 1Answers: 0

  August 2019

  Hello @sandy,

  Thanks for your inputs. Even I tried with this approach. But my table has too many columns to search.

  Hence I went on to do this, with my custom search, without using the datatable in-built search function.

  Thanks,
  Bhargava
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  August 2019

  Have you seen this example?
  https://datatables.net/examples/api/multi_filter_select.html

  Kevin
• bhargavakl Posts: 6Questions: 1Answers: 0

  August 2019 edited August 2019

  Hello @kthorngren,

  Thanks for the link. It's looking good though. But the user wanted only the global search box instead of the controls on the footer to search the table.

  I have tried more towards the datatable extensions, which unable to yield the result.

  The only problem in my table is the dropdowns, rest all the search works fine (thanks to the datatable fantastic search feature). Datatable search is unable to search the dropdown's selected value.

  I am constructing my dropdown as below,

  columnDefs: [
                          {
                              "targets": [1],
                              "className": "text-center",
                              "type": "html",
                              "render": function (data, type, row, meta) {
                                  if (!isonhold)
                                      return '<span>' + data + '</span>';
                                  //below is for temp purpose
                                  var defaultselected = data;
                                  var id = 'actions_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                  var $select = $('<select class="select2 form-control actionsdata" id="' + id + '" style="width:100%; border:1px solid #1AB394"></select>');
                                  var processList = row.actionList.split(",");
                                  $.each(processList, function (a, b) {
                                      var $option = $("<option></option>",
                                          {
                                              text: b,
                                              value: b
                                          });
                                      if (defaultselected == b) {  //use == instead of ===
                                          $option.attr("selected", "selected");
                                      }
                                      $select.append($option);
                                  });
                                  return $select.prop("outerHTML");
                              }
                          },
  ]
  

  Please do let me know anybody tried this earlier. It helps a lot.

  Thanks & Regards,
  Bhargava

  Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  August 2019

  It looks like you are trying to put the drop down search in each row of the table. Is this what you want to do?

  Kevin
• bhargavakl Posts: 6Questions: 1Answers: 0

  August 2019 edited August 2019

  Hello @kthorngren,

  It's not the dropdown search in each row of the table, column 2 contains the dropdowns where user can select the data and save it. Basically, I am doing the inline edit datatable where dropdown is the part of the data selection in column 2.

  here is my entire table's columnDefs,

  $('#WIPdataTable').DataTable({
                      data: response,
                      pageLength: 100,
                      responsive: true,
                      deferRender: true,
                      dom: "<'row'<'col-md-3'l><'col-sm-8 text-right left-padding'p><'col-md-1 text-right'B>>" +
                          "<'row'<'col-sm-12'tr>>",
                      language: {
                          searchPlaceholder: "Search by the following columns as a criteria"
                      },
                      lengthMenu: [10, 25, 50, 100, 200],
                      columns: [
                          { data: "status" },
                          { data: "actions" },
                          { data: "attentionTo" },
                          { data: "comments" },
                          { data: "jobNo" },
                          { data: "eye" },
                          { data: "shortageReason" },
                          { data: "customer" },
                          { data: "productCode" },
                          { data: "description" },
                          { data: "rplCode" },
                          { data: "newRPL" },
                          { data: "eta" },
                          { data: "lineNo" },
                          { data: "ref2" },
                          { data: "scheduleDate" },
                          { data: "diam" },
                          { data: "sph" },
                          { data: "add" },
                          { data: "cyl" },
                          { data: "base" },
                          { data: "ct" },
                          { data: "logstCd" },
                          { data: "trackNo" },
                          { data: "createdUser" },
                          { data: "createdDate" }
                      ],
                      columnDefs: [
                          {
                              "targets": [0],
                              "render": function (data, type, row, meta) {
                                  return '<span>' + data + '</span><input type="hidden" id="lineNo" value=' + row.lineNo + '>';
                              }
                          },
                          {
                              "targets": [1],
                              "className": "text-center",
                              "type": "html",
                              "render": function (data, type, row, meta) {
                                  if (!isonhold)
                                      return '<span>' + data + '</span>';
                                  //below is for temp purpose
                                  var defaultselected = data;
                                  var id = 'actions_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                  var $select = $('<select class="select2 form-control actionsdata" id="' + id + '" style="width:100%; border:1px solid #1AB394"></select>');
                                  var processList = row.actionList.split(",");
                                  $.each(processList, function (a, b) {
                                      var $option = $("<option></option>",
                                          {
                                              text: b,
                                              value: b
                                          });
                                      if (defaultselected == b) {  //use == instead of ===
                                          $option.attr("selected", "selected");
                                      }
                                      $select.append($option);
                                  });
                                  return $select.prop("outerHTML");
                              }
                          },
                          {
                              "targets": [3],
                              "className": "text-center",
                              "render": function (data, type, row, meta) {
                                  var datatodisplay = data == null ? '' : data;
                                  if (!isonhold)
                                      return '<span>' + datatodisplay + '</span>';
                                  return '<input type="text" name="value" value="' + datatodisplay + '" style="box-shadow: 0px 0px 5px 0px rgba(151,163,155,1);border-radius:6px;border:none;width:100%;background-color:initial; color:#676a6c"><span style="display: none;">' + datatodisplay + '</span>'
                              }
                          },
                          {
                              "targets": [10],
                              "className": "text-center",
                              "render": function (data, type, row, meta) {
                                  if (!isonhold)
                                      return '<span style="word-wrap:break-word;color: #676a6c">' + data + '</span>';
                                  var id = 'rpl_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                  var $select = $('<select class="select2 form-control rpl" id="' + id + '" style="width:100%; box-shadow: 0px 0px 5px 0px rgba(151,163,155,1); border-radius:6px;"></select>');
                                  var processList = data.split(",");
                                  $.each(processList, function (a, b) {
                                      var $option = $("<option></option>",
                                          {
                                              text: b,
                                              value: b
                                          });
                                      if (row.process == b) {  //use == instead of ===
                                          $option.attr("selected", "selected");
                                      }
                                      $select.append($option);
                                  });
                                  return $select.prop("outerHTML");
                              }
                          },
                          {
                              "targets": [11],
                              "className": "text-center",
                              "render": function (data, type, row, meta) {
                                  var datatodisplay = data == null ? '' : data;
                                  if (!isonhold)
                                      return '<span>' + datatodisplay + '</span>';
                                  return '<input type="text" name="value" value="' + datatodisplay + '" style="box-shadow: 0px 0px 5px 0px rgba(151,163,155,1);border:none;border-radius:6px; width:100%;background-color:initial;color: #676a6c"><span style="display: none;">' + datatodisplay + '</span>'
                              }
                          },
                          {
                              "targets": [12],
                              "className": "text-center",
                              "render": function (data, type, row, meta) {
                                  if (!isonhold)
                                      return '<span>' + data + '</span>';
                                  var id = 'eta_' + row.jobNo + '_' + row.eye + '_' + row.productCode + '_' + row.sequence + '_' + row.lineNo + '';
                                  return '<input class="datepicker" id="' + id + '" data-provide="datepicker" value="' + data + '" style="box-shadow: 0px 0px 5px 0px rgba(151,163,155,1);border-radius:6px;border:none;width:100%;height:20px;background-color:initial">'
                              }
                          }
                      ],                    
                  });
                  return WIPdataTable;
              },
  
  

  Please have a look and let me know any idea on the same.

  Thanks & Regards,
  Bhargava
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  August 2019

  I don't see where you have tried to implement the drop down search. The example I linked to builds the search drop down from the data in the column. Are you asking how to generate the search drop down list from row.actionList for column 2?

  Kevin