Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
124 views
in Technique[技术] by (71.8m points)

How to add custom multiple rows filter in datatable ajax and php

I'm using datatables to display data from mySQL tables and i am trying to filter multiple rows from column city. it working fine for single rows filter but it not working for multiple selection.

I am getting error:

DataTables warning: table id=empTable - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

I am new to PHP Please help me where i am wrong.

Here is my index page

<!doctype html>
<html>

<head>
    <title>Filter in DataTable - AJAX and PHP</title>
    <!-- Datatable CSS -->
    <link href='https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>

    <!-- jQuery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Datatable JS -->
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>

    <!-- Datatable CSS -->
    <link href='https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'>
    <!-- jQuery Library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Datatable JS -->
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>


</head>

<body>

    <div>
        <!-- Custom Filter -->
        <table>
            <tr>
                <td>
                    <input type='text' id='searchByName' placeholder='Enter name'>
                </td>
                <td>
                    <select id='searchBycity' name='searchBycity' multiple>
                        <option value=''>-- Select City--</option>
                        <option value='pune'>pune</option>
                        <option value='Jaipur'>Jaipur</option>
                        <option value='Delhi'>Delhi</option>
                        <option value='Bhopal'>Bhopal</option>
                    </select>



                </td>
            </tr>
        </table>

        <!-- Table -->
        <table id='empTable' class='display dataTable'>
            <thead>
                <tr>
                    <th>Employee name</th>
                    <th>Email</th>
                    <th>Gender</th>
                    <th>Salary</th>
                    <th>City</th>
                </tr>
            </thead>

        </table>
    </div>

    <!-- Script -->
    <script>
        $(document).ready(function() {
            var dataTable = $('#empTable').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                //'searching': false, // Remove default Search Control
                'ajax': {
                    'url': 'ajaxfile.php',
                    'data': function(data) {
                        // Read values
                        var city = $('#searchBycity').val();
                        var city = city.join(",");
                        var name = $('#searchByName').val();

                        // Append to data
                        data.searchBycity = city;
                        data.searchByName = name;
                    }
                },
                'columns': [{
                        data: 'emp_name'
                    },
                    {
                        data: 'email'
                    },
                    {
                        data: 'gender'
                    },
                    {
                        data: 'salary'
                    },
                    {
                        data: 'city'
                    },
                ]
            });

            $('#searchByName').keyup(function() {
                dataTable.draw();
            });

            $('#searchBycity').change(function() {
                dataTable.draw();
            });


        });

    </script>
</body>

</html>
question from:https://stackoverflow.com/questions/65662274/how-to-add-custom-multiple-rows-filter-in-datatable-ajax-and-php

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...