How to optimize speed when loading heavier data?

tschen01

I'm currently working on a project that will load around 5000 entries with pictures and audio files. With only around 400 entries it already takes a while.
The link to the website is: http://humstaging.byu.edu/cambodianoralhistories
You can check the speed through inspecting the network.

I created a filter that loads all the data which might be a reason?
The code for the filter:
'''
jQuery(document).ready(function() {
var table = jQuery('#myTable').DataTable(
{
// "deferRender": true
}

            );

            jQuery.fn.dataTable.ext.search.push(
                        function( settings, data, dataIndex ) {
                            var min = parseInt( $('#min').val(), 10 );
                            var max = parseInt( $('#max').val(), 10 );
                            var age = parseInt( data[6] ) || 0; // use data for the age column

                            if ( ( isNaN( min ) && isNaN( max ) ) ||
                                ( isNaN( min ) && age <= max ) ||
                                ( min <= age   && isNaN( max ) ) ||
                                ( min <= age   && age <= max ) )
                            {
                                return true;

                            }
                            return false;

                        }
                    );
            jQuery.fn.dataTable.ext.search.push(
                function( settings, searchData, index, rowData, counter ) {
                var gender = jQuery('input:checkbox[name="gender"]:checked').map(function() {
                    return this.value;                   
                }).get();

                if (gender.length === 0) {
                        return true;
                    }

                if (gender.indexOf(searchData[8]) !== -1) {
                    return true;
                }


                return false;

                }
            );

            jQuery.fn.dataTable.ext.search.push(
                function( settings, searchData, index, rowData, counter ) {
                var birth = jQuery('input:checkbox[name="Birth"]:checked').map(function() {
                    return this.value;                   
                }).get();

                if ( birth.length === 0) {
                        return true;
                    }

                if ( birth.indexOf(searchData[9]) !== -1) {
                    return true;
                }

                return false;

                }
            );


            jQuery.fn.dataTable.ext.search.push(
                function( settings, searchData, index, rowData, counter ) {
                var storys = jQuery('input:checkbox[name="story"]:checked').map(function() {
                    return this.value;                   
                }).get();
                var stories = searchData[7].split(',');
                var text = "";
                for (x in stories) {
                    text += stories[x] + " ";
                }

               if (storys.length === 0) {
                    return true;
                }

                for(var i=0;i<storys.length;i++){
                    if(text.includes(storys[i])==true){
                        return true;
                    }
                }


                return false;


                }
            );


            // Event listener to the two range filtering inputs to redraw on input
            jQuery('#min, #max').keyup( function() {

                table.draw();


            } );

            jQuery('input:checkbox').on('change', function () {                 
                table.draw();                   
            });


        } );

'''

colin

This section of the FAQ should help, it discusses various techniques to improve performance,

Cheers,

Colin