• 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
464 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 (251,210 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ź 173 wizyt
0 głosów
2 odpowiedzi 113 wizyt
pytanie zadane 18 kwietnia 2017 w JavaScript przez `Krzychuu Stary wyjadacz (13,940 p.)
0 głosów
0 odpowiedzi 229 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...