Search trough number values.

KimBruil

Hey everyone,

I just made this little select in html..

           <div class="col-md-2">
                <label>Sterren</label>
                <select data-placeholder="Selecteer het aantal sterren..."
                        class="select filter_sterren form-control"
                        data-column='3'>
                    <option></option>
                    <option value="3.75">4+</option>
                </select>
            </div>

If the option is 3.75 or higher.. I want datatables show all rows to show data with 3.75 or higher. I need some javascript with it.

var table = $('#example').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "bStateSave": true,
                    "select": true,
                    "ajax": "{{ route('datatable-beoordeling') }}",
                    "columns": [
                        {
                            data: 'voornaam',
                            render: function (data, type, row) {
                                if (row.tussenvoegsel != null) {
                                    return "<a class='link' href='users/" + row.user_id + "'>" + row.voornaam + ' ' + row.tussenvoegsel + ' ' + row.achternaam + "</a>";
                                } else {
                                    return "<a class='link' href='users/" + row.user_id + "'>" + row.voornaam + ' ' + row.achternaam + "</a>";
                                }
                            }
                        },
                        {data: 'naam'},
                        {data: 'titel'},
                        {
                            data: 'rating',
                            render: function (data, type, row) {
                                if (data >= 0.00 && data <= 0.24) {
                                    return "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 0.25 && data <= 0.74) {
                                    return "<i class=\"icon-star-half\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 0.76 && data <= 1.24) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 1.25 && data <= 1.74) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-half\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 1.75 && data <= 2.24) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 2.25 && data <= 2.74) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-half\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 2.75 && data <= 3.24) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 3.25 && data <= 3.74) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-half\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 3.75 && data <= 4.24) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-empty3\"></i>";
                                } else if (data >= 4.25 && data <= 4.74) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-half\"></i>";
                                } else if (data >= 4.75 && data <= 5.00) {
                                    return "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>" +
                                        "<i class=\"icon-star-full2\"></i>";
                                }
                                else {
                                    return "SOMETHING WENT WRONG";
                                }

                            }

                        },
                    ],
                });

KimBruil

I have been able to search the exact 3.75... Now I give the filter to look at 3.75 and higher??

$('.filter_sterren').select2({
    allowClear: true
  });

 $('.filter_sterren').change(function(){
       table.columns(3).search(
       $(this).select2('data')[0].id
    ).draw();

});

I know the javascript operator is >=
Nut not how to implent it.

kthorngren

See if this example helps.
https://datatables.net/examples/plug-ins/range_filtering.html

Kevin