Генерация данных JQuery на пользовательский запрос

Question

Я ломал голову над этим, я использовал jquery datatable http://www.datatables.net для отображения записей из базы данных.

Я использовал встроенное поле поиска, но это одно поле.

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

Итак, я подумал о том, чтобы иметь форму с несколькими полями формы, когда я ввожу параметры поиска в поле поиска и таблица перерисовывается в соответствии с возвращенным результатом.

Мне было интересно, как отправить данные из полей формы, чтобы запрос был сгенерирован, а ответ был возвращен, а таблица перерисована.

ниже приведен пример кода, который я использовал

`/ Инициализация таблицы данных /

        $('#second_tab_table').dataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "components/report/report_processing.php?status=displayOrderReport",
            "bJQueryUI": true,
            "bStateSave": true,
            "bAutoWidth": false,
            "sPaginationType": "full_numbers"
        } );`

Я также посмотрел на пользовательскую фильтрацию http://www.datatables.net/examples/plug-ins/range_filtering.html,, но это не служит цели.

Буду очень признателен за любую помощь в этом.

Решено так:

---

`$ (document) .ready (function () {

        /*Initialize the data table*/
        $('#second_tab_table2').dataTable( {
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "components/report/report_processing.php?status=displayOrderReport&sid=<?php echo $_REQUEST['sid']; ?>",
            "bJQueryUI": true,
            "bStateSave": true,
            "bAutoWidth": false,
            "sPaginationType": "full_numbers"
        } );


         $("#oc_id").live("change", function() {

            var data = $("#formulario_personal").serialize();
            var dataString = 'oc_id=8&status=displayOrderReport&'+ data;
           $.ajax({                           
                    type: "POST",
                   url: "components/report/report_processing.php",
                    data: dataString,
                    cache:false,
                    success: function(html){;
                            var oTable = $('#second_tab_table').dataTable();
                            oTable.fnDraw();
                    }
                });
        });


});`

Кажется, это будет работать: http://www.datatables.net/examples/server_side/custom_vars.html

Answer 1

Правильный способ - переопределить fnServerData или fnServerParams.

Это зависит от версии, поэтому вам нужно убедиться, что вы используете правильную версию. Я думаю fnServerData лучше поддерживает старые версии. поэтому я покажу примеры по этому поводу.

Эта функция хорошо документирована . Вот пример использования .

Из их примера посмотрите, как они добавляют данные в запрос с помощью оператора aoData.push. Я использую его, и он хорошо работает для меня. Так что если у вас есть больше проблем, пожалуйста, дайте мне знать.

$(document).ready(function() {
    $('#example').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "../examples_support/server_processing.php",
        "fnServerData": function ( sSource, aoData, fnCallback ) {
            /* Add some extra data to the sender */
            aoData.push( { "name": "more_data", "value": "my_value" } );
            $.getJSON( sSource, aoData, function (json) { 
                /* Do whatever additional processing you want on the callback, then tell DataTables */
                fnCallback(json)
            } );
        }
    } );
} );