Datatables search option for hyperlinks

Datatables search option for hyperlinks

parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0

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

Replies

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406
    edited 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

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0
    edited 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.

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    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.

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0

    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>

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    7980 is not found.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0

    Hey Kevin,
    Thanks for your reply.

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    @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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

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

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

    Kevin

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0

    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

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

  • rf1234rf1234 Posts: 2,809Questions: 85Answers: 406

    @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

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0
    edited 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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • parameswaranvparameswaranv Posts: 8Questions: 0Answers: 0

    $('#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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

Sign In or Register to comment.