Javascript以字母顺序显示具有多列的表数据

Question

I was wondering how to achieve a table with order like this:

I tried this code in my JS :

var streetsPerPage = 5; 
var numNodes = parseInt(data.StreetList.length);
var noOfColumns=4;
var noOflist = numNodes / noOfColumns;
var rem = numNodes % noOfColumns;
var cellCount = 0;
var streetRowTemplate='<table width="100%"><tr><td>';
$.each(data.StreetList, function(index, streets){
    $('.streetListTemplate').removeClass('hide'); cellCount++;
    streetRowTemplate+='<div class="paddingTd" style="white-space: nowrap;"><a href="">'+streets.StreetName+'</a></div>';
    if(rem == 0) {
      if(cellCount >= noOflist) {
        streetRowTemplate+='</td>';
        streetRowTemplate+='<td>';
        cellCount = 0;
      }
    } else {
      if(cellCount == (noOflist + 1)) {
        streetRowTemplate+='</td>';
        cellCount = 0;
        streetRowTemplate+='<td>';
      }
    }
});
streetRowTemplate +='</td></tr></table>';
$('#streetListFilter').html(streetRowTemplate);

Here's the output:

Any help would be appreciated. Thanks in advance! :)

Answer 1

I needed something similar and I came across this question, so the answer is I am sure too late for the original poster. I wish they has posted a little more information about the dataset used, but from the code I managed to use something similar. jsfiddle link

The issue with the code as posted is the reminder in noOflist after

var noOflist = numNodes / noOfColumns;

The data used in the example doesn't have an even division with the desired columns and will result in a remainder which will break when handled in later the line

if(cellCount == (noOflist + 1)) {

The working solution is to use 'Math.floor' to get the integer of 'noOflist'. The complete working code is below,

       var streetsPerPage = 5;
       var numNodes = parseInt(StreetList.length);
       var noOfColumns=3;
       var noOflist = numNodes / noOfColumns;
       noOflist = Math.floor(noOflist)
       var rem = numNodes % noOfColumns;
       var cellCount = 0;
       var streetRowTemplate='<table width="100%"><tr><td>';
       $.each(StreetList, function(index, streets){
         console.log(streets.StreetName);
           $('.streetListTemplate').removeClass('hide'); cellCount++;
           streetRowTemplate+='<div class="paddingTd" style="white-space: nowrap;"><a href="">'+streets.address1+'</a></div>';
           if(rem == 0) {
             if(cellCount >= noOflist) {
               streetRowTemplate+='</td>';
               streetRowTemplate+='<td>';
               cellCount = 0;
             }
           } else {
             if(cellCount == (noOflist + 1)) {
               streetRowTemplate+='</td>';
               cellCount = 0;
               streetRowTemplate+='<td>';
             }
           }
       });
       streetRowTemplate +='</td></tr></table>';
       $('#streetListFilter').html(streetRowTemplate);

This is an example of the dataset I used from github

       var StreetList = [

            {
                "address1": "1745 T Street Southeast",
                "address2": "",
                "city": "Washington",
                "state": "DC",
                "postalCode": "20020",
                "coordinates": {
                    "lat": 38.867033,
                    "lng": -76.979235
                }
            },
            {
                "address1": "6007 Applegate Lane",
                "address2": "",
                "city": "Louisville",
                "state": "KY",
                "postalCode": "40219",
                "coordinates": {
                    "lat": 38.1343013,
                    "lng": -85.6498512
                }
            },


     ]