File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Number</th>
            <th>Position</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Number</th>
            <th>Position</th>
          </tr>
        </tfoot>
​
​
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
$(document).ready( function () {
  var data = {
  "copyright" : "NHL and the NHL Shield are registered trademarks of the National Hockey League. NHL and NHL team marks are the property of the NHL and its teams. © NHL 2018. All Rights Reserved.",
  "teams" : [ {
    "id" : 13,
    "name" : "Florida Panthers",
    "link" : "/api/v1/teams/13",
    "venue" : {
      "id" : 5027,
      "name" : "BB&T Center",
      "link" : "/api/v1/venues/5027",
      "city" : "Sunrise",
      "timeZone" : {
        "id" : "America/New_York",
        "offset" : -4,
        "tz" : "EDT"
      }
    },
    "abbreviation" : "FLA",
    "teamName" : "Panthers",
    "locationName" : "Florida",
    "firstYearOfPlay" : "1993",
    "division" : {
      "id" : 17,
      "name" : "Atlantic",
      "nameShort" : "ATL",
      "link" : "/api/v1/divisions/17",
      "abbreviation" : "A"
    },
    "conference" : {
      "id" : 6,
      "name" : "Eastern",
      "link" : "/api/v1/conferences/6"
    },
    "franchise" : {
      "franchiseId" : 33,
      "teamName" : "Panthers",
      "link" : "/api/v1/franchises/33"
    },
    "roster" : {
      "roster" : [ {
        "person" : {
          "id" : 8466141,
          "fullName" : "Roberto Luongo",
          "link" : "/api/v1/people/8466141"
        },
        "jerseyNumber" : "1",
        "position" : {
          "code" : "G",
          "name" : "Goalie",
          "type" : "Goalie",
          "abbreviation" : "G"
        }
      }, {
        "person" : {
          "id" : 8468001,
          "fullName" : "Derek MacKenzie",
          "link" : "/api/v1/people/8468001"
        },
        "jerseyNumber" : "17",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8471426,
          "fullName" : "Troy Brouwer",
          "link" : "/api/v1/people/8471426"
        },
        "jerseyNumber" : "22",
        "position" : {
          "code" : "R",
          "name" : "Right Wing",
          "type" : "Forward",
          "abbreviation" : "RW"
        }
      }, {
        "person" : {
          "id" : 8471735,
          "fullName" : "Keith Yandle",
          "link" : "/api/v1/people/8471735"
        },
        "jerseyNumber" : "3",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      }, {
        "person" : {
          "id" : 8473503,
          "fullName" : "James Reimer",
          "link" : "/api/v1/people/8473503"
        },
        "jerseyNumber" : "34",
        "position" : {
          "code" : "G",
          "name" : "Goalie",
          "type" : "Goalie",
          "abbreviation" : "G"
        }
      }, {
        "person" : {
          "id" : 8474098,
          "fullName" : "Colton Sceviour",
          "link" : "/api/v1/people/8474098"
        },
        "jerseyNumber" : "7",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8474149,
          "fullName" : "Evgenii Dadonov",
          "link" : "/api/v1/people/8474149"
        },
        "jerseyNumber" : "63",
        "position" : {
          "code" : "R",
          "name" : "Right Wing",
          "type" : "Forward",
          "abbreviation" : "RW"
        }
      }, {
        "person" : {
          "id" : 8474636,
          "fullName" : "Michael Hutchinson",
          "link" : "/api/v1/people/8474636"
        },
        "jerseyNumber" : "39",
        "position" : {
          "code" : "G",
          "name" : "Goalie",
          "type" : "Goalie",
          "abbreviation" : "G"
        }
      }, {
        "person" : {
          "id" : 8474884,
          "fullName" : "Mike Hoffman",
          "link" : "/api/v1/people/8474884"
        },
        "jerseyNumber" : "68",
        "position" : {
          "code" : "L",
          "name" : "Left Wing",
          "type" : "Forward",
          "abbreviation" : "LW"
        }
      }, {
        "person" : {
          "id" : 8475755,
          "fullName" : "Alexander Petrovic",
          "link" : "/api/v1/people/8475755"
        },
        "jerseyNumber" : "6",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      }, {
        "person" : {
          "id" : 8475760,
          "fullName" : "Nick Bjugstad",
          "link" : "/api/v1/people/8475760"
        },
        "jerseyNumber" : "27",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8475796,
          "fullName" : "Mark Pysyk",
          "link" : "/api/v1/people/8475796"
        },
        "jerseyNumber" : "13",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      }, {
        "person" : {
          "id" : 8476389,
          "fullName" : "Vincent Trocheck",
          "link" : "/api/v1/people/8476389"
        },
        "jerseyNumber" : "21",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8476456,
          "fullName" : "Jonathan Huberdeau",
          "link" : "/api/v1/people/8476456"
        },
        "jerseyNumber" : "11",
        "position" : {
          "code" : "L",
          "name" : "Left Wing",
          "type" : "Forward",
          "abbreviation" : "LW"
        }
      }, {
        "person" : {
          "id" : 8476875,
          "fullName" : "Mike Matheson",
          "link" : "/api/v1/people/8476875"
        },
        "jerseyNumber" : "19",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      }, {
        "person" : {
          "id" : 8477346,
          "fullName" : "MacKenzie Weegar",
          "link" : "/api/v1/people/8477346"
        },
        "jerseyNumber" : "52",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      }, {
        "person" : {
          "id" : 8477493,
          "fullName" : "Aleksander Barkov",
          "link" : "/api/v1/people/8477493"
        },
        "jerseyNumber" : "16",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8477932,
          "fullName" : "Aaron Ekblad",
          "link" : "/api/v1/people/8477932"
        },
        "jerseyNumber" : "5",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      }, {
        "person" : {
          "id" : 8477955,
          "fullName" : "Jared McCann",
          "link" : "/api/v1/people/8477955"
        },
        "jerseyNumber" : "90",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8477996,
          "fullName" : "Juho Lammikko",
          "link" : "/api/v1/people/8477996"
        },
        "jerseyNumber" : "91",
        "position" : {
          "code" : "R",
          "name" : "Right Wing",
          "type" : "Forward",
          "abbreviation" : "RW"
        }
      }, {
        "person" : {
          "id" : 8478366,
          "fullName" : "Frank Vatrano",
          "link" : "/api/v1/people/8478366"
        },
        "jerseyNumber" : "72",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8478843,
          "fullName" : "Denis Malgin",
          "link" : "/api/v1/people/8478843"
        },
        "jerseyNumber" : "62",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8479553,
          "fullName" : "Maxim Mamin",
          "link" : "/api/v1/people/8479553"
        },
        "jerseyNumber" : "78",
        "position" : {
          "code" : "C",
          "name" : "Center",
          "type" : "Forward",
          "abbreviation" : "C"
        }
      }, {
        "person" : {
          "id" : 8480955,
          "fullName" : "Bogdan Kiselevich",
          "link" : "/api/v1/people/8480955"
        },
        "jerseyNumber" : "55",
        "position" : {
          "code" : "D",
          "name" : "Defenseman",
          "type" : "Defenseman",
          "abbreviation" : "D"
        }
      } ],
      "link" : "/api/v1/teams/13/roster"
    },
    "shortName" : "Florida",
    "officialSiteUrl" : "http://www.floridapanthers.com",
    "franchiseId" : 33,
    "active" : true
  } ]
};
  
  
  var table = $('#example').DataTable({
    data: data.teams[0].roster.roster,
    
    columns: [
      {data: 'person.fullName'},
      {data: 'jerseyNumber'},
      {data: 'position.name'},
    ]
    
  });
} );
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers