У меня есть группы кнопок. Когда пользователь нажимает на ссылку, значение фильтруется на основе содержимого ссылки. По умолчанию я добавил выбранный класс. Я хочу, чтобы значение по умолчанию для ссылки, содержащей класс selected, учитывалось для фильтрации перед срабатыванием триггеров события клика. Мой подробный код находится здесь - https://codepen.io/deepanshu88/pen/gOxOLeO It отлично работает, когда пользователь нажимает на c-btn-group, но не учитывает значение по умолчанию при загрузке страницы. На данный момент он показывает полные данные без фильтрации при загрузке страницы.

<div class="c-btn-group">
  <a class="c-btn selected">Large Cap</a>
  <a class="c-btn">Small Cap</a>
  <a class="c-btn">virginica</a>
</div>

JS

$('.c-btn-group').on('click', 'a', function(event) {
   var searchTerm = this.textContent;

/* 4th column filtering */   
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
       
 if (data[3] == searchTerm) {return true;}
 return false;
 
   })
  
   table.draw();
   $.fn.dataTable.ext.search.pop();
  
// Add or remove 'selected' class;
event.preventDefault();
$('a').removeClass('selected');
$(this).addClass('selected');       
    });
2
john 10 Окт 2021 в 11:49

2 ответа

Лучший ответ

Попробуйте приведенный ниже сценарий. Вот демонстрация

Выделите логику фильтрации dataTable внутри функции filter. Получите выделенный текст до $('.c-btn-group .selected').text(); и позвоните filter(initialSelectedText);

var myList2;

$.ajax({
  url: "https://raw.githubusercontent.com/markwsac/jsonfile/main/jsondata.json",
  type: "get",
  dataType: 'text',
  async: false,
  success: function(response) {
    if (!response) return;

    response = response.slice(0, -1); // trim ";" at the end
    window.myList2 = JSON.parse(response);

  },
  error: function(err) {
    console.log(err);
  }
});

var myList = window.myList2;

$(document).ready(function () {
    table = $("#mfTable").DataTable({
        data: myList,
        paging: true,
        lengthChange: false,
        searching: true,
        info: false,
        columns: [
            { data: 'Fund Name' },
            { data: 'Morningstar Rating' },
            { data: 'Category Rank' },
            { data: 'Category' },   
            { data: 'Expense Ratio' }, 
            { data: 'AUM (Cr)' }, 
            { data: 'NAV' }, 
        ],
            columnDefs: [{
            "defaultContent": "-",
            "targets": "_all"
        }]
    });
    
    const initialSelectedText = $('.c-btn-group .selected').text();
    filter(initialSelectedText);

    $('.c-btn-group').on('click', 'a', function(event) {
        var searchTerm = this.textContent;
        /* 4th column filtering */   
        filter(searchTerm);
        // Add or remove 'selected' class;
        event.preventDefault();
        $('a').removeClass('selected');
        $(this).addClass('selected');  
    });
  
});

function filter(searchTerm){

    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        if (data[3] == searchTerm) {return true;}
        return false;
    });
    
    table.draw();
    $.fn.dataTable.ext.search.pop();
}
1
navnath 10 Окт 2021 в 09:13

DataTable предоставляет возможность для этого. Когда вы инициализируете свою таблицу, просто используйте параметр searchCols , который загрузит таблицу с предоставленным начальным поиском. Например:

  table = $("#mfTable").DataTable({
    data: myList,
    paging: true,
    lengthChange: false,
    searching: true,
    info: false,
        columns: [
                { data: 'Fund Name' },
                { data: 'Morningstar Rating' },
                { data: 'Category Rank' },
                { data: 'Category' },   
                { data: 'Expense Ratio' }, 
                { data: 'AUM (Cr)' }, 
                { data: 'NAV' }, 
            ],
      columnDefs: [{
    "defaultContent": "-",
    "targets": "_all"
  }],
    searchCols: [
         null,
         null,
         null,
         { "search": "Large Cap" },   
         null, 
         null, 
         null, 
            ]
  })

Вот ссылка для этой опции https://datatables.net/reference/option/searchCols

Вы также можете использовать собственный метод поиска библиотеки, а не реализовывать его самостоятельно, поэтому вместо написания:

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
       
 if (data[3] == searchTerm) {return true;}
 return false;
 
   })
  
   table.draw();
   $.fn.dataTable.ext.search.pop();

Просто пиши: table.column(3).search(searchTerm).draw();

1
Farzin Farzanehnia 10 Окт 2021 в 09:50