Как в динамическую таблицу добавить нумерацию строк?

Question

[Павел]

Использую jquery https://datatables.net/ , из БД вытягиваю таблицу , все замечательно , сделал фильтр неразборчивого поиска по колонкам , добавил саму функцию нумерации

function numeric() {
        $('.numeric').each(function (i) {
            $(this).text(i + 1);
        });
    }
$('.form-control').keyup(function () {
        numeric();
    });

.form-control - это класс инпута в котором происходит поиск , как только у нас фильтрация прошла , мы делаем нумерацию по новой. И все бы хорошо но оно падло работает неадекватно )))

попытаюсь объяснить, если я в неразборчивом поиске ввожу текст , находит нужный мне результат но не нумерует его пока я не продолжу вводить... похоже без видео не обьяснить))

https://youtu.be/_1Ft1jvH9io

как сделать нормальную нумерацию строк? Я думал сделать применении функции по времени через settimeout но это не подходит так как если будет 100500 записей , будет нагрузка большая на сайте , а еще конфликтует с некоторыми делами вне таблицы..

Comments

[RAX7]

А чем пример из документации не устроил? https://datatables.net/examples/api/counter_column...

[Павел]

RAX7, ппц , а я тут целый день мозХ ломаю )))))) , снимаю шляпу , можно ссылку в ответ , выберу решением

[RAX7]

mrusklon, бывает ;)

Answer 1

[RAX7]

Проще сделать как в документации написано, чем изобретать велосипед.
https://datatables.net/examples/api/counter_column...

Answer 2

[Николай Чуприк]

А по какому событию у вас вызывается фильтрация таблицы? Скорее всего у вас чехарда с очерёдностью вызовов функции numeric() и той, которая фильтрует таблицу. Поставьте на них точки останова, чтобы проследить очерёдность.

Завесьте их обе на keyup и вызывайте их явно одну за другой. Ну или какие-то флаги готовности фильтрации filterReady = true/false придумывайте или callback, чтобы numeriс() запускалась после её завершения.

Comments

[Павел]

numeric(); вызывается 1 раз при загрузке страницы , а затем по... проще показать наверно код

function numeric() {
        $('.numeric').each(function (i) {
            $(this).text(i + 1);
        });
    }

    numeric();
    var sortNum1 = $('.sorting'); // click
    var sortNum2 = $('.sorting_asc'); // click
    var sortNum3 = $('.column_filter'); // keyup
    var sortNum4 = $('.form-control'); // keyup

    $('.buttons-html5 span').click(function () {
        numeric();
    });
    sortNum1.click(function () {
        numeric();
    });
    sortNum2.click(function () {
        numeric();
    });
    sortNum3.keyup(function () {
        numeric();
    });
    sortNum4.keyup(function () {
        numeric();
    });

дело в том что для всех этих классов надо сделать при нажатии нумерацию , не обращайте внимание на огромный код , это пока бетка , главное чтоб работало