Rendering question

majky992 · November 2016

I am trying to show down info about client, and there are 6 types of meetings - its just true or false. I use render function and return <i class="fa fa-check"> .There is no problem with loading, moving to next page, resizing or ordering. Just with searching.
When I write one letter into search field there are called 8 requests (i have 7 rendering func and 1 is for search i think)
For every keyup event is called request for every rendering function (it should call just one). Its slowing down page.
i really don't know what is going on. In the picture you can see requests. I hope I have described my problem properly.
Thank for your answer

$(document).ready(function () {
        var table = $('#idTable').DataTable({
            processing: true,
            serverSide: true,
            deferRender: true,
            ajax: {
                "url": "exampleUrl",
                "type": "get"
            },
            columns: [
                {data: 'name', name: 'name},
                {
                    data: "meetingType1",
                    searchable: false,
                    ordering: false,
                    sortable: true,
                    render: function (data) {
                        return (data == true) ? '<i class="fa fa-check" aria-hidden="true">' : '<i class="fa fa-remove" aria-hidden="true"></i>';
                    }
                },
               ------> 7 more meetingTypes
            ],

        });

allan · December 2016

I don't see where you are attaching any event handlers for the search, but it sounds like they are being attached multiple times (I suspect that for every element it is adding an event handler to all other search inputs as well as it self). However, without a test case showing the issue, I really can't say for sure.

Allan

majky992 · December 2016

$(document).ready(function () {
        // Setup - add a text input to each footer cell
        $('#idTable tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input style="max-width: 13rem" type="text" placeholder="Find' + title + '" />');
        });
        // DataTable
        var table = $('#idTable').DataTable();

        // Apply the search
        table.columns().every(function () {
            var that = this;

            $('input', this.footer()).on('keyup change', function () {  
                if (that.search() !== this.value) {
                    that
                            .search(this.value)
                            .draw();
                }
            });
        });
    });

Thats whole code i have.
When I remove search for every collumn everything is all right. Number of requests is not equal to number of search fields.

allan · December 2016

Do you have footer elements? I'm wondering if this.footer() is returning undefined.

Allan

majky992 · December 2016

Thank for idea in view i have only 4 footers <th></th> .. when number of collumns in footer is equal to number of collumns in head its ok
Thanks a lot

Rendering question

Rendering question

Answers

Howdy, Stranger!

Categories

DataTables

Rendering question

Rendering question

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables