Datatables search option for hyperlinks

parameswaranv · February 2022

In my project I've created a dataTable, Everything is working fine except one particular case.

While performing searching, my datatable is also searching the text inside the href with in the anchor tag. But i don’t want to consider this case.

Any suggestions will be appreciated.

Regards
Param

rf1234 · February 2022

Just exclude the column with the hyperlink from search.
https://datatables.net/reference/option/columns.searchable

Alternatively you can set the column type to "html":
https://datatables.net/reference/option/columns.type

parameswaranv · February 2022

Thanks for your reply. I have tried but its not working. I have attached the code in below for your reference.

Was searching "27980". Also searching below herf. But I want search this href

<a href="/dashboards/af639976-8c05-4a39-bcd0-e4d043f27980">testparam</a>

HTML

        <tbody>
        <tr id="af639976-8c05-4a39-bcd0-e4d043f27980" role="row" class="odd">                    
            <td class="g-hidden-xs-up sorting_1">2022-01-18T20:14:22+05:30</td>
            <td class="g-first-child">
                <div class="media align-items-center">
                    <div class="d-flex">
                        <div class="product-list-image-container g-width-40 g-height-40">
                            <img src="/assets/img-temp/v.png" alt="">
                        </div>
                    </div>
                    <div class="media-body text-left g-ml-15 g-py-15">
                        <a href="/dashboards/af639976-8c05-4a39-bcd0-e4d043f27980">testparam</a>
                    </div>
                </div>
            </td>
            <td id="transaction-amount">NA</td>                    
            <td id="last-transaction-time">NA</td>                  
        </tr>           
        </tbody>


Code        
        /**

* Datatables wrapper.
*
* @author Htmlstream
* @version 1.0
*
*/
(function($) {
'use strict';

$.HSCore.components.HSDatatables = {
/**
*
*
* @var Object _baseConfig
*/
_baseConfig: {
paging: true,
},

/**
 *
 *
 * @var jQuery pageCollection
 */
pageCollection: $(),

/**
 * Initialization of Datatables wrapper.
 *
 * @param String selector (optional)
 * @param Object config (optional)
 *
 * @return jQuery pageCollection - collection of initialized items.
 */

init: function(selector, config) {
  this.collection = selector && $(selector).length ? $(selector) : $();
  if (!$(selector).length) return;

  this.config =
    config && $.isPlainObject(config)
      ? $.extend({}, this._baseConfig, config)
      : this._baseConfig;

  this.config.itemSelector = selector;

  this.initDatatables();

  return this.pageCollection;
},

initDatatables: function() {
  //Variables
  var $self = this,
    config = $self.config,
    collection = $self.pageCollection;

  //Actions
  this.collection.each(function(i, el) {
    //Variables
    var $this = $(el),
      $info = $this.data('dt-info'),
      $search = $this.data('dt-search'),
      $entries = $this.data('dt-entries'),
      $pagination = $this.data('dt-pagination'),
      $detailsInvoker = $this.data('dt-details-invoker'),
      pageLength = $this.data('dt-page-length'),
      isResponsive = Boolean($this.data('dt-is-responsive')),
      isSelectable = Boolean($this.data('dt-is-selectable')),
      isColumnsSearch = Boolean($this.data('dt-is-columns-search')),
      isColumnsSearchTheadAfter = Boolean(
        $this.data('dt-is-columns-search-thead-after'),
      ),
      isShowPaging = Boolean($this.data('dt-is-show-paging')),
      scrollHeight = $this.data('dt-scroll-height'),
      paginationClasses = $this.data('dt-pagination-classes'),
      paginationItemsClasses = $this.data('dt-pagination-items-classes'),
      paginationLinksClasses = $this.data('dt-pagination-links-classes'),
      paginationNextClasses = $this.data('dt-pagination-next-classes'),
      paginationNextLinkClasses = $this.data(
        'dt-pagination-next-link-classes',
      ),
      paginationNextLinkMarkup = $this.data(
        'dt-pagination-next-link-markup',
      ),
      paginationPrevClasses = $this.data('dt-pagination-prev-classes'),
      paginationPrevLinkClasses = $this.data(
        'dt-pagination-prev-link-classes',
      ),
      paginationPrevLinkMarkup = $this.data(
        'dt-pagination-prev-link-markup',
      ),
      table = $this.DataTable({
        pageLength: pageLength,
        responsive: isResponsive,
        scrollY: scrollHeight ? scrollHeight : '',
        pagingType: 'full_numbers',
        scrollCollapse: scrollHeight ? true : false,
        paging: isShowPaging ? isShowPaging : config.paging,
        drawCallback: function(settings) {
          var api = this.api(),
            info = api.page.info();

          $($info).html(
            'Showing ' +
              (info.start + 1) +
              ' to ' +
              info.end +
              ' of ' +
              info.recordsTotal +
              ' Entries',
          );
        },
        columnDefs: [{ type: 'html', targets: 1 }],
      }),
      info = table.page.info(),
      paginationMarkup = '';

  });
},




},

format: function(value) {
  return value;
},

};
})(jQuery);

Please help me.

rf1234 · February 2022

I tried to replicate your issue but I couldn't. Search never searches inside the anchor tag in my case. I don't even need "columns.type".

Please post a test case showing the issue.

parameswaranv · February 2022

Hi,
Test case does not show any issue.

Can you please try below table body in your code please and search "7980" whether get the results or not.

<tbody>
<tr id="af639976-8c05-4a39-bcd0-e4d043f27980" role="row" class="odd">
<td class="g-hidden-xs-up sorting_1">2022-01-18T20:14:22+05:30</td>
<td class="g-first-child">
<div class="media align-items-center">
<div class="d-flex">
<div class="product-list-image-container g-width-40 g-height-40">
<img src="/assets/img-temp/v.png" alt="">
</div>
</div>
<div class="media-body text-left g-ml-15 g-py-15">
<a href="/dashboards/af639976-8c05-4a39-bcd0-e4d043f27980">testparam</a>
</div>
</div>
</td>
<td id="transaction-amount">NA</td>
<td id="last-transaction-time">NA</td>
</tr>
</tbody>

rf1234 · February 2022

7980 is not found.

kthorngren · February 2022

If you want to search for the href, ie, /dashboards/af639976-8c05-4a39-bcd0-e4d043f27980 then you will need to use Orthogonal data to extract the href from the data for the filter operation. Use a Javascript Regex expression to extract the -teg href. Here is an example test case with your data.
http://live.datatables.net/bezilili/1/edit

You may need to fine tune the regex expression to meet your needs. Use Stack Overflow to find examples. I used an example from this thread.

Kevin

parameswaranv · March 2022

Hey Kevin,
Thanks for your reply.

testparam

I have tried various options but unable to achieve my requirement. While
Search '7980' its searching inside the href value and giving the search result as a
'testparam'. But I want this should search only inside the href value

Its really painful to get proper results.

Can please help me on this.

Thanks,
Param

kthorngren · March 2022

But I want this should search only inside the href value

I don't understand what you mean. The orthogonal data for filter is returning only the href. You can search for 7980 and it will show the row with 7980. You can't search fortestparam and have the filter work. Is this what you want?

I updated the test case with a second row with a different href to demonstrate.
http://live.datatables.net/bezilili/2/edit

Please provide more details of what you are looking for.

Kevin

rf1234 · March 2022

@parameswaranv wants that the 7980 is NOT found because it is not visible to the user. I just modified your test case, Kevin.
http://live.datatables.net/buvurezi/1/edit

Just removed the search regex and the 7980 is no longer found. Only the displayed values of "testparam" and "testparam1" are found. That is the default behavior, if you don't do anything "special". That's what I already said in my post above.

Hence I have no idea why the 7980 is found in @parameswaranv 's code: I wasn't able to replicate the issue either.

kthorngren · March 2022

Oh, I see "href value" is not the href itself but the text

Yes, we will need to see the example where 7980 is found when you don'e want it to be found.

Kevin

parameswaranv · March 2022

Yes Kevin you are correct. While search "7980" or any value from the href it should not give any result.

Example 1 - search by - 8649
<a href="/vendingmachines/dashboards/a964ed65-a4bf-4d06-8649-3f58d3104feb">Beauty Kitchen Return Station 1</a>
Output - No result found

Example 2 - search by - 310
<a href="/vendingmachines/dashboards/a964ed65-a4bf-4d06-8649-3f58d3104feb">Beauty Kitchen Return Station 1</a>
Output - No result found

Example 1 - search by - bea
<a href="/vendingmachines/dashboards/a964ed65-a4bf-4d06-8649-3f58d3104feb">Beauty Kitchen Return Station 1</a>
Output - Beauty Kitchen Return Station 1

Basically should not search any of the values from href.

Hope Kevina and rf1234 both are understood.

@rf1234 - I am unable to access the url (https://live.datatables.net/buvurezi/1/edit)

Thanks
Param

colin · March 2022

Yep, that link seems wobbly, but yep, as Kevin said, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rf1234 · March 2022

@rf1234 - I am unable to access the url (https://live.datatables.net/buvurezi/1/edit)

Just clicked the link in my original post above. It works.
But here it is again:

http://live.datatables.net/buvurezi/1/edit

parameswaranv · March 2022

Hello All,

I have used columnDefs: [{ searchable: false, targets: [0, 1, 11] }] fixed the issue.

But after searching the value pagination values are not updating.

kthorngren · March 2022

But after searching the value pagination values are not updating.

Does this issue happen in the the test case in this thread? If not please provide a test case to show the issue. Also provide the steps to replicate this issue.

Kevin

parameswaranv · March 2022

Hi Kevin,

Please find my code in below

 $(document).ready(function() {
      $.HSCore.components.HSDatatables.init('.js-datatable');
      const listViewDatatable = $('.js-datatable').DataTable({
           pagingType: "full_numbers",
           paging: true,     
          columnDefs: [{ searchable: false, targets: [0,8] }],
        });
      $('#datatableSearch2').on('keyup', function() {
        if ($(this).val().length > 0) {
            listViewDatatable.search($(this).val()).draw();
        } else {
            listViewDatatable.search('').draw();
        }        
      }); 

});

<table class="js-datatable table table-striped u-table--v3 u-editable-table--v1 g-color-black"
      data-dt-is-show-paging="true" data-dt-search="#datatableSearch2" data-dt-pagination="datatablePagination2" data-dt-page-length="10"
      data-order="[[ 5, &quot;desc&quot; ]]" {{>navigation/dataTableConfig}}
      >
</table>

After searching happened and draw the table then pagination values are not updating and even event also not attaching

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

kthorngren · March 2022

Maybe others on the forum knows but I'm not sure what some of you table data settings are like data-dt-search="#datatableSearch2".

After searching happened and draw the table then pagination values are not updating and even event also not attaching

Are you saying the $('#datatableSearch2').on('keyup' is not attaching?

We will need a link to your page or a test case replicating the issues to help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

parameswaranv · March 2022

$('#datatableSearch2').on('keyup') attachable.

In my table one column has dropdown.

navigation/dataTableConfig}} > Edit Clone Delete

After searching happened and draw the table then event also not attaching for dropdown

kthorngren · March 2022

If the event is not attaching then that would suggest the #datatableSearch2 element is not in the DOM when trying to create the event handler. Or its removed and re-added which means the event handler needs to be recreated. As I said without seeing what you are doing we won't be able to provide much help.

Kevin

Datatables search option for hyperlinks

Datatables search option for hyperlinks

Replies

Howdy, Stranger!

Categories

DataTables

Datatables search option for hyperlinks

Datatables search option for hyperlinks

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables