Showing all rows

randy.johnson

I have a data table that has A question in the first column and answers in a second column.

If the user hits submit and their are questions check and no answers I turn the row red.

I want to take this a step farther and show only The red rows so the user can fix the issues before submitting the form.

Any ideas on how I go about this?

Thank You,

Randy

allan

Hi Randy,

Use a custom search function that will show only the rows you want at the time you want.

Regards,
Allan

randy.johnson

Here is the js code. Do you have any pointers on how to improve?

Thank You.

<script type="text/javascript">

    // This function checks for rows with errors after a form submit and only shows those rows.
    // A row with errors is a tr with the class danger

    $.fn.dataTable.ext.search.push(
        function( settings, searchData, index, rowData, counter  ) {
            console.log("1:",jQuery.hasData(document.body,"form_valid"));
            //console.log("2:",jQuery.data("form_valid"));
            if (jQuery.hasData(document.body,"form_valid") && jQuery.data(document.body,"form_valid")=="false") {


                var row = $(rowData[0]).val();

                var hasDangerClass = $("#questions input[value='"+row+"']").closest("tr").hasClass('danger');

                if(hasDangerClass) {
                    return true
                } else {
                    return false;
                }

            }
            
            return true;
        }
    );


    $(document).ready(function() {
        var oTable = $('#questions').DataTable( {
        "lengthMenu": [[-1, 10, 25, 50], ["All", 10, 25, 50]]
        });

        //On submit we check to see if there are any checked questions with no answers.  
        // If there are questions with no answers we mark the row with a danger class
        // and set the form_valid data attribute to use in the plugin. Finally we scroll
        // to the top of the page so the user can see the errors.

        $("#qualform").submit(function(event){
            jQuery.removeData(document.body,"form_valid");

            $("select[name='questions_length'] option[value='-1']").prop('selected',true);

            oTable.draw();

            var form_valid =  verify_answers();

            if (form_valid === false){

                event.preventDefault();
                jQuery.data(document.body,"form_valid", "false");
                oTable.draw();
                //$.scrollTo('#questions', 800);
                window.scrollTo(0, 0);

            }
        });

        // This function removes all the danger classes from the rows and shows all questions again.
        $("#reset_errors").click(function(){
            jQuery.removeData(document.body,"form_valid");
            $("#questions tr").each(function(){

                if ( $(this).hasClass('danger') ){

                    $(this).removeClass('danger');

                }

            });

            oTable.draw();
        });


    } );
</script>

allan

I would try to keep DOM reading out of the filtering function, since that can be fairly slow. That that would imply that you need to add the data that it is checking to global variables or into the row data (depending on the exact use).

However, if it is performant enough for you, then go with that!

Allan