• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

datatables - filtrowanie kilku pól jednym ajaxem

VPS Starter Arubacloud
+1 głos
680 wizyt
pytanie zadane 25 stycznia 2022 w JavaScript przez Sebastian Szyja Bywalec (2,810 p.)

Cześć wszystkim :-)

Posiadam bibliotekę datatables. Zrobiłem dynamiczną tabelę ajax ale mam problem z sortowaniem 3 pól jednoczenie. aktualnie mam zrobione ze po kliknieciu filtruj wysyłane są trzy żądania AJAX:

<table class="table table-hover" id="datatable-ajax-1" style="font-size: 0.75em;">
    <thead>
        <tr>
            <th style="text-align: left;"></th>
            <th style="text-align: left;">Treść logu</th>
            <th style="text-align: left;">Źródło</th>
            <th style="text-align: left;">Data</th>
            <th style="text-align: left;"></th>
        </tr>
    </thead>
    <tfoot class="alert alert-info">
        <tr>
            <th></th>
            <th>
                <div class="row">
                    <div class="col-sm-12 action-type">
                        <select id="action-type" name="action-type" multiple>
                                <option value="addPolicy">Dodanie dokumentu: Polisa</option>
                    <option value="add_task">Dodanie nowego zadania</option>
                                <option value="addPayments">Dodanie płatności</option>
                                <option value="addChat">Dodanie wiadomości czat</option>
                                <option value="addOrder">Dodanie zamówienia</option>
                                <option value="addOrderToInsly">Dodanie zamówienia do INSLY</option>
                                <option value="editPolicy">Edycja dokumentu: Polisa</option>
                                <option value="showDocuments">Pokazanie dokumentów</option>
                                <option value="showOffer">Pokazanie ofert</option>
                                <option value="phone_connection">Połączenie z telefonem</option>
                                <option value="delete_task">Usunięcie zadania</option>
                                <option value="notice_order">Wygenerowanie wypowiedzenia systemowego</option>
                                <option value="close_task">Zakończenie zadania</option>
                                <option value="update_task">Zaktualizowanie zadania</option>
                                <option value="changeName_order">Zmiana nazwy zamówienia</option>
                                <option value="newAdmin_order">Zmiana opiekuna zamówienia</option>
                                <option value="newAdmin_task">Zmiana osoby odpowiedzialnej za zadanie</option>
                    <option value="changeStatus_order">Zmiana statusu zamówienia</option>
                </select>
                    </div>
                </div>
            </th>
            <th>
                <div class="row">
                    <div class="col-sm-12 action-source">
                        <select id="action-source" name="action-source" multiple>
                    <option value="communication.mySMS.logs">communication.mySMS.logs</option>
                                <option value="orders_logs">orders_logs</option>
                                <option value="tasks_logs">tasks_logs</option>
                                <option value="connections_made">connections_made</option>
                                <option value="emails_logs">emails_logs</option>
                                <option value="orders_automaticFill_logs">orders_automaticFill_logs</option>
                                <option value="orders_messages">orders_messages</option>
                    <option value="orders_status_logs">orders_status_logs</option>
                </select>
                    </div>
                </div>
            </th>
            <th>
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-fields"><i class="fas fa-calendar-day" aria-hidden="true"></i></button>
                            </span>
                            <input type="text" id="date-range" name="date-range" class="form-control" placeholder="Wybierz zakres daty" style="background-color: #FFF; border-color: #efefef;" readonly />
                        </div>
                    </div>
                </div>
            </th>
            <th>
                <div class="row">
                    <div class="form-group col-sm-12">
                        <div class="input-group">
                            <button class="btn btn-primary profile-button" id="buttonFilter">Filtruj</button>
                        </div>
                    </div>
                </div>
            </th>
        </tr>
    </tfoot>
</table>
$(function(){
    $.fn.dataTable.defaults.column.asSorting = ['desc', 'asc'];
    var dataTable1 = $('#datatable-ajax-1').dataTable({
        order: [[ 0, "desc" ]],
        dom:
            "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>"+
            "<'row'<'col-sm-12'B>>",
        "stateSave": true,
        buttons: [
            <?php if(acl_get('type')=="super_admin"): ?> 'csv' <?php endif; ?>
        ],
        "language": {
            "url": "<?php echo base_url();?>assets/global/plugins/datatables/Polish.json"
        },
        "colVis": {
            "buttonText": "Pokaż/Ukryj kolumny"
        },
        "autoWidth": false,
        "processing": true,
        "serverSide": true,
        "columns": [
            {"data":"icon","orderable": false},
            {"data":"message","orderable": false},
            {"data":"source","orderable": false},
            {"data":"date","orderable": false},
            {"data":"action","orderable": false},
        ],
        "ajax": {
            "dataType": "jsonp",
            "url": "<?php echo site_url('admin/datatable/admins/index/');?>",
            "data": {
                "admin_id": <?=$admin->id;?>
            }
        }
    });

    $("#buttonFilter").click(function() {
        dataTable1.fnFilter($('#action-type').val(), '1' );
        dataTable1.fnFilter($('#action-source').val(), '2' );
        dataTable1.fnFilter($('input[name="date-range"]').val(), '3');
    });
});

Miał  by ktoś pomysł jak rozwiązać ten problem? :(

komentarz 26 stycznia 2022 przez VBService Ekspert (255,840 p.)
komentarz 26 stycznia 2022 przez Sebastian Szyja Bywalec (2,810 p.)

Nie chce sortowania tylko filtrowanie. Posiadam 3 filtry:

  1. zakres dat
  2. typ logu
  3. źródło logu

i ogólnie filtrowanie zrobiłem tylko po kliknięciu filtruj lecą 3ajaxy a chciałbym żeby po kliknięciu FILTRUJ wyszedł tylko jeden - nie chce obciążać serwera ani bazy ;))

Tutaj mam przykład gdzie po kliknięciu filtruj lecą trzy osobne requesty. 
 

dataTable1.fnFilter($('input[name="date-range"]').val(), '3');

Napewno jest inna funkcja niż fnFilter która najpierw dodaje dane do datatables które chce przesłać a następnie dopiero wykonuje reqesta.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 225 wizyt
0 głosów
2 odpowiedzi 129 wizyt
pytanie zadane 18 kwietnia 2017 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)
0 głosów
0 odpowiedzi 266 wizyt

93,016 zapytań

141,976 odpowiedzi

321,271 komentarzy

62,359 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...