CODEWITHSUNDEEP
jqueryjquery-templates
Firknl
Firknl

Reputation: 23

How to build 5 column table using jquery template Json response

Below is my Json Response

"Table" : [
        {
            "CompanyName" : "Company1",
            "Title" : "xxx",
            "URL" : "http://www.xyz.com",
            "FileNameStatus" : "active"
        },
        {
           "CompanyName" : "Company2",
            "Title" : "xxx",
            "URL" : "http://www.xyz1.com",
            "FileNameStatus" : "inactive"
        },
        ...

$("#tableTemplate").tmpl(data.Table).appendTo("#tblid");

 <script id="tableTemplate" type="text/x-jquery-tmpl">                 
     <tr>
        <td>      
            <a href="${URL}" target="_blank">
              <img src="${FileNameStatus}.jpg" title="${Title}" />
            </a>                    
        </td>
      </tr>
   </script>     

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>

What I am looking is to build a table with 5 columns and n rows.(columns repeating horizontally).

eg:
col1  col2  col3  col4 col5
col6  col7  col8  col9 col10
col11 col12 col13
.....
....

How to build such table with the above data structure and jquery template? Thanks in advance.

Upvotes: 2

Views: 6926

Answers (3)

RP Niemeyer
RP Niemeyer

Reputation: 114792

One solution is to not process your array directly by the template (so, it executes the template for each item in the array). Instead, you could pass the object that contains your array (so, pass data that contains data.Table).

Then, in your template, you have full access to the index, while you loop through your cells using {{each}}. Using modular division you can properly start and end rows like:

<script id="tableTemplate" type="text/html">
    <table>
        {{each(i, cell) Table}}
           {{if i % 5 == 0}}
           <tr>
           {{/if}}
             <td>      
                <a href="${URL}" target="_blank">
                  <img src="${FileNameStatus}.jpg" title="${Title}" />
                </a>                    
             </td>
           {{if (i % 5 == 4) || (i == Table.length-1)}}
           </tr>
           {{/if}}
        {{/each}}
    </table>
</script>

Sample here: http://jsfiddle.net/rniemeyer/5naAL/

Upvotes: 4

swalk
swalk

Reputation: 766

Here's the simplest solution (unless I misunderstood something). jquery-tmpl auto loops over objects/arrays so you don't need to process the data beforehand. My example only has 3 columns, but you can easily add 2 more <td>s with whatever data you want in it.

<script>
var data = 
    {
        "Table" : 
        [ 
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }, 
            {
                 "CompanyName" : "Company2", 
                 "Title" : "xxx", 
                 "URL"    : "http://www.xyz1.com", 
                 "FileNameStatus" : "inactive" 
            },
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }
        ]
    };

$(function(){
     $("#tableTemplate").tmpl(data.Table).appendTo("#tblid");
});
</script>

<script id="tableTemplate" type="text/x-jquery-tmpl">
    <tr>    
        <td>                   
            <a href="${URL}" target="_blank">               
                <img src="${FileNameStatus}.jpg" title="${Title}" /> 
            </a>
        </td>
        <td>
            ${CompanyName}
        </td>
        <td>
            ${Title}
        </td>
    </tr>
</script>

<div id="rightWrapper">
    <table id="tblid">
    </table>
</div>

Working example: http://jsfiddle.net/qYgrZ/

Upvotes: 1

Chandu
Chandu

Reputation: 82913

Try this:

Add a new function called processData to massage the input array and add a new template to render the cell as given below:

Working example @ http://jsfiddle.net/Cjqr9/

<script type="text/javascript">
    var data = 
    {
        "Table" : 
        [ 
            { 
                "CompanyName" : "Company1", 
                "Title" : "xxx", 
                "URL" : "http://www.xyz.com",
                "FileNameStatus" : "active" 
            }, 
            {
                 "CompanyName" : "Company2", 
                 "Title" : "xxx", 
                 "URL"  : "http://www.xyz1.com", 
                 "FileNameStatus" : "inactive" 
                    ]
    };

    $(function(){
         processData(data.Table);
         $("#tableTemplate").tmpl(processData(data.Table)).appendTo("#tblid");
    });

    function processData(data){
        var delta = 5 - data.length%5;
        while(delta > 0){
            data.push({});
            delta--;
        }
        var arr = null;
        var retArr = [];
        $.each(data, function(i, item){
            if(i%5 == 0){
                arr = [];
                retArr.push(arr);
            }
            arr.push(item);
        });
        return retArr;
    }
    </script>

    <script id="tableTemplate" type="text/x-jquery-tmpl">                      
        <tr>         
            {{tmpl($data) "#cellTemplate"}}
        </tr>    
    </script>

    <script id="cellTemplate" type="text/x-jquery-tmpl">
        {{if URL}}
         <td>                   
                <a href="${URL}" target="_blank">               
                    <img src="${FileNameStatus}.jpg" title="${Title}" /> 
                    ${$item.parent.indexOf($item.data)}
                </a>                             
         </td>       
         {{else}}
            <td/>
         {{/if}}
    </script>
    <div id="rightWrapper">
        <table id="tblid">
        </table>
    </div>

Upvotes: 0

Related Questions