Search by Colum

RicardoSilva

Hi,

I want to enable inputbox to search for some columns, i enable search on columns but didn't work, any help ?

HTML Code:

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">websample</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container body-content">

            <h2>Index</h2>
            <table class="table table-bordered " id="PeopleListTable"></table>


            <hr />
            <footer>
                <p>&copy; 2017 - websample</p>
            </footer>
        </div>

Javascript Code

<script type="text/javascript">
        $(function () {
            var peopleList = $('#PeopleListTable').DataTable({
                serverSide: true,
                processing: true,
                searching: true,
                stateSave:true, 

                ajax: {
                    url: '/Teste/Data',
                    type: "POST"
                },
                columns: [
                    { data: "FirstName", title: "First Name",searchable:true, orderable: false },
                    { data: "LastName", title: "Last Name" },
                    { data: "BirthDateFormatted", title: "Birth Date", orderData: 3 }, //Allow post TSQL server side processing
                    { data: "BirthDate", visible: false },
                    { data: "Weight", title: "Weight" },
                    { data: "Height", title: "Height" },
                    { data: "Children", title: "Children" }

                ]
            });
        });
    </script>

However i enable searchable but not appearing any inputbox. Why not ?

colin

Hi @RicardoSilva ,

columns.searchable only determines if a search applies to that column, it doesn't add any elements to the table.

If you want that, you'll need to do something like this example here.

Cheers,

Colin

RicardoSilva

Thank you for answer.
I can add some input box as a search inputs, but how can i add some input box that my request.form have this request "columns[0][search][value]" with the search value four the first column ?

colin

Hi @RicardoSilva ,

As you've enabled serverSide, this would happen automatically. When you search (or filter or change page etc) the request will be passed to the server script.

Cheers,

Colin

RicardoSilva

i know i received, however my search value from each column is empty, why ?

colin

If you look at this example here, when you do a column search and check the network tab in the developer tools, you'll see something this:

columns[0][data]: first_name
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]: airi
columns[0][search][regex]: false

We're happy to take a look, but as it's something to do with your configuration, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin