Write a New Table Row Every Nth Column

Introduction

For a while now, I've been using various bootstrap/responsive CSS templates. I recently was on a project where I wanted to create a new row of <div class="col-md-3"> for every four database records. I'm using LINQ and ENTITY framework for the data layer. First, I wanted to figure out my algorithm in POJS (Plain Old Java Script).

Below is my process:

First, I wrote the logging in POJS. The provided examples will demonstrate a variety of JS looping mechansims. Then, I'll include my C#/MVC code snippet.

The Code

/// For Loop Demo

  // This is the demo data set. Eventually this array will be repaced by Entity Framework
    var arr = ['Morkie', 'Shitzu', 'Collie', 
    'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
    var totalRecords = arr.length;
    var nthCol = 4 // nthCol is how many column you want per row
      
    var totalRows = totalRecords/nthCol ;
        
    var html = "<style>table, th, 
    td {border: 1px solid black; border-collapse: collapse;}</style>"
    html += "<table>";
    
    for(var curCol = 1; curCol <= totalRecords ; curCol ++){
                   
       if (curCol % nthCol == 1) {
        html += "<tr>";
       }
       
       html += "<td>" + arr[curCol-1] + "</td>";
       
       if (curCol %nthCol == 0) {
            html += "</tr>"
       }       
    }
    
    html += "<table>";
    
    document.writeln(html);

/// Same Demo Using a While Loop

    var arr = ['Morkie','Shitzu', 'Collie', 
    'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
    var totalRecords = arr.length;
    var nthCol = 4
    var curCol = 1;  
    var totalRows = totalRecords/nthCol ;    
    
    var html = "<style>table, th, 
    td {border: 1px solid black; border-collapse: collapse;}</style>"
    html += "<table>";
    
    while( curCol <= totalRecords ){       
              
       if (curCol % nthCol == 1) {
        html += "<tr>";
       }
       
       html += "<td>" + arr[curCol-1] + "</td>";
       
       if (curCol %nthCol == 0) {
            html += "</tr>"
       }
       curCol ++ ;
    }
    
    html += "<table>";
    
    document.writeln(html);

/// Same Demo Using For In Loop

    var arr = ['Morkie','Shitzu', 'Collie', 
    'Mutt', 'Golden', 'Yellow Lab', 'Labradoodle'];
    var totalRecords = arr.length;
    var nthCol = 4

    var totalRows = totalRecords/nthCol ;     
    
    var html = "<style>table, th, 
    td {border: 1px solid black; border-collapse: collapse;}</style>"
    html += "<table>" ;
    
    for(var curCol in arr){
                
        if (curCol % nthCol == 0) {
            html += "<tr>";
        }
        
        html += "<td>" + arr[curCol] + "</td>";
        
        if(curCol % nthCol == 3){
            html += "</tr>";
        }        
    }
    
    html += "</table>";
    document.writeln(html);

/// Same Demo Using C#, EF, and a Bootstrap Theme

using (Data_Context ctx = new Data_Context())
            {
                var faqs = (from faq in ctx.FAQs where faq.IsActive == true select faq).ToList();

                var totalRecords = faqs.Count;
                var nthCol = 4;
                var curCol = 1;
                while(curCol <= totalRecords)
                {
                    //begin row
                    if(curCol % nthCol == 1){ html += "<div class='row wow fadeInLeft animated' 
                    data-wow-offset='30' data-wow-duration='1.5s' 
                    data-wow-delay='0.15s'>"; }

                    //write column data
                    html += String.Format(@"
                <div class='col-md-3'>
                        <div class='item item-1'>
                        <div class='item-overlay'>
                        </div>
                        <div class='item-content'>
                            <div class='item-top-content'>
                                <div class='item-top-content-inner'>
                                    <div class='item-product'>
                                        <div class='item-top-title'><h5>
                                        Question</h5>
                                        <p class='subdescription'>{0}</p></div>
                                    </div>
                                </div>
                            </div>
                            <!-- ITEM HOVER CONTENT-->
                            <div class='item-add-content'>
                                <div class='item-add-content-inner'>
                                    <div class='section'><p>Answer</p></div>
                                    <div class='section'>
                                        <button type = 'button' 
                                        class='btn btn-primary custom-button green-btn' 
                                        data-toggle='modal' 
                                        data-target='#mod{1}'>Answer</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>",faqs[curCol-1].Question,curCol);

                    //close row
                    if(curCol %nthCol == 0) { html += "</div>"; }

                    curCol++;
                }
            }

            return MvcHtmlString.Create(html);
        }

History

• 24^th January, 2016: Initial version