Laravel Datatables submit form via ajax source

Question

I want to submit a form fields via Datatables ajax source and i did it like follow:

Form

<form id="search_fields">
    <input type="text" name="condition" value='1'>
</form>

Table

<table class="table" id="list">
            <thead>
                <tr>
                    <th>#</th>
                    <th>بارکد</th>
                    <th>نمبر صادره مرجع</th>
                    <th>نمبر وارده#</th>
                    <th>مرجع ارسال کننده</th>
                    <th>وضعیت سند</th>
                    <th>عملیه</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>

Datatable configuration js

<script type="text/javascript">
$(document).ready(function() {
$('#list').dataTable( 
{
        "ajax": {
            "url": "{{URL::to('/docscom/getSearchResultData')}}",
            "type": "POST",
            "data": $('#search_fields').serialize(),
            "success": function(response)
            {
                alert(response);
            }
        }, 

        'sDom': 'lf<"clearfix">tip',
        "bProcessing": true,
        "bServerSide": true,
        "iDisplayLength": 1,
        "sServerMethod": "POST",
        //"sAjaxSource": "{{URL::to('/docscom/getSearchResultData')}}",
        "aaSorting": [[ 1, "desc" ]],
        "aoColumns": [
        { 'sWidth': '30px' },
        { 'sWidth': '100px' },
        { 'sWidth': '130px', 'sClass': 'center' },
        { 'sWidth': '250px', 'sClass': 'center' },
        { 'sWidth': '130px', 'sClass': 'center' },
        { 'sWidth': '100px', 'sClass': 'center' },
        { 'sWidth': '100px', 'sClass': 'center' }
        ],
        "language": {
            "lengthMenu": "نمایش _MENU_ ریکارد در هر صفحه",
            "zeroRecords": "ریکارد موجود نیست",
            "info": "نمایش صفحه _PAGE_ از _PAGES_",
            "infoEmpty": "ریکارد موجود نیست",
            "infoFiltered": "(filtered از _MAX_ مجموع ریکارد)"
        }
    }
); 

});
</script>

Controller function

//get search result
    public function getSearchResultDataTable()
    {
        print_r($_POST);exit;
        //get result from database
        $result = Docscom::getSearchResult();

        return Datatables::of($result)
                            ->add_column('operations', '<a href="{{URL::route(\'getDocDetails\',$id)}}" class="table-link">
                                                                    <span class="fa-stack">
                                                                        <i class="fa fa-square fa-stack-2x"></i>
                                                                        <i class="fa fa-search-plus fa-stack-1x fa-inverse"></i>
                                                                    </span>
                                                                </a>')
                            //->set_row_class('@if($status==0) danger @elseif($status == 1) success @endif')
                            //->set_row_data('Test','{{$status}}')
                            ->make();
    }

Ajax Print_r Post Response

Array
(
    [0] => c
    [1] => o
    [2] => n
    [3] => d
    [4] => i
    [5] => t
    [6] => i
    [7] => o
    [8] => n
    [9] => =
    [10] => 1
    [draw] => 1
    [columns] => Array
        (
            [0] => Array
                (
                    [data] => 0
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [1] => Array
                (
                    [data] => 1
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [2] => Array
                (
                    [data] => 2
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [3] => Array
                (
                    [data] => 3
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [4] => Array
                (
                    [data] => 4
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [5] => Array
                (
                    [data] => 5
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

            [6] => Array
                (
                    [data] => 6
                    [name] => 
                    [searchable] => true
                    [orderable] => true
                    [search] => Array
                        (
                            [value] => 
                            [regex] => false
                        )

                )

        )

    [order] => Array
        (
            [0] => Array
                (
                    [column] => 1
                    [dir] => desc
                )

        )

    [start] => 0
    [length] => 1
    [search] => Array
        (
            [value] => 
            [regex] => false
        )

)

Any one can tell me what is wrong my code? Thanks in advance

Answer 1

use this for dynamic input attributes

         ajax: {
                url:"your_url",
                type:"post",
                data: function(d){
                    $.each($('#filterform').serializeArray(), function(i, obj){                        
                        if(!d[obj['name']]) d[obj['name']] = [];
                        d[obj['name']].push(obj['value']);
                    });
                }                    
            },

Answer 2

You are not using ajax.data correctly, only object or function is accepted.

Your ajax.data property should be changed to:

"data": function(d){
   $.each($('#search_fields').serializeArray(), function(i, obj){
      d['form_' + obj['name']] = obj['value'];
   });
}    

This will add form_ parameters with element names appended to server-side request. I'm using form_ prefix to avoid name collision with other DataTables parameters (such as start, length, search, etc.) please modify accordingly.