Call to draw() method of datatable restes the text fields

Ash123

I am trying to implement following for my 'search & list' view. When user enters some text in a field (equivalent to #extra) and hit the search button, I invoke draw() method on the datatable and within the ajax property of the datatable I am trying to read the text entered by user.

Issue I am facing is that when the draw() method is invoked, the input text fields are reset and d.extra_search is set to null. I am using the Datatables in laravel using Yajra plugin. Please let me know what wrong I am doing.

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

My actual code

<!-- @extends('partials.datatable-master') -->
@section('main-content')
    <br/>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Custom Filter</h3>
        </div>
        <div class="panel-body">
            <form method="POST" id="search-form" class="form-inline" role="form">

                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" class="form-control" name="name" id="user-name" placeholder="search name">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="form-control" name="email" id="user-email" placeholder="search email">
                </div>

                <button type="submit" class="btn btn-primary">Search</button>
            </form>
        </div>
    </div>
    <table id="users-table" class="table table-condensed">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
    </table>
@endsection

@push('scripts')
    <script>
            var userEmail = $('#search-form #user-email').val();
            alert('outside oTable email is - ' + userEmail); **<== THIS COMES BLANK**
        $(function() {
            var oTable = $('#users-table').dataTable({

                dom: "<'row'<'col-xs-12'<'col-xs-6'l><'col-xs-6'p>>r>"+
                    "<'row'<'col-xs-12't>>"+
                    "<'row'<'col-xs-12'<'col-xs-6'i><'col-xs-6'p>>>",
                processing: true,
                serverSide: true,
                ajax: {
                    url: 'datatables/data',
                    data: function (d) {
                        d.name = $('#user-name').val();
                        <!-- d.email = 'gmail.com'; -->
                        d.email = $('input[name = user-email]').val();
                    }
                },
                order: [[1, 'desc'], [2, 'asc']],
                columns: [
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'updated_at', name: 'updated_at' }
                ]
            });

            $('#search-form').on('submit', function(e) {
                alert('1 - email is - ' + $('#search-form #user-email').val());  **<== THIS HAS VALUE**
                oTable.draw();
                alert('2 - email is - ' + $('#search-form #user-email').val());  **<== THIS COMES BLANK**
                e.preventDefault();
            });
        });
    </script>
@endpush

allan

Change:

var oTable = $('#users-table').dataTable({

To be:

var oTable = $('#users-table').DataTable({

$().dataTable() gives you a jQuery instance. $().DataTable() gives you a DataTables API instance.

If that doesn't resolve it, we'd need a link to a page showing the issue.

Thanks,
Allan

Ash123

That did the trick. Thanks a lot Allan. I wish I had posted earlier