wenzhixin bootstrap table does load any of the data that's passed to the page

Question

I'm wrestling with this table. Data is returned to the page in what seems to be the correct format, but nothing is displayed except for a gray bar.

This is my table

<table id="contactHistoryList"
   data-toggle="table"
   data-url="/api/members/@ViewBag.MemberID/contact-history">
<thead>
    <tr>
        <td data-field="id">@Html.DisplayNameFor(m => m.ID)</td>
        <td data-field="contactedOn">@Html.DisplayNameFor(m => m.ContactedOn)</td>
        <td data-field="method">@Html.DisplayNameFor(m => m.Method)</td>
        <td data-field="reason">@Html.DisplayNameFor(m => m.Reason)</td>
        <td data-field="direction">@Html.DisplayNameFor(m => m.Direction)</td>
        <td data-field="outcome">@Html.DisplayNameFor(m => m.Outcome)</td>
        <td data-field="notes">@Html.DisplayNameFor(m => m.Notes)</td>
    </tr>
</thead>

The url goes out to my api controller

[Route("{memberId:int:min(1)}/contact-history")]
    public async Task<IHttpActionResult> GetContactHistory(int memberId)
    {
        try
        {
            IEnumerable<MemberContactView> contactHistory = await _memberContactRepository.GetByMemberIdAsViewAsync(memberId);

            var results = contactHistory
                .OrderByDescending(ch => ch.CreatedOn)
                .Select(ch => new MemberContactHistoryItem
                {
                    ID = ch.ID,
                    ContactedOn = ch.ContactedOn,
                    Method = ch.ContactMethod,
                    Reason = ch.ContactReason,
                    Direction = ch.InboundContact,
                    Outcome = ch.ContactDisposition,
                    Notes = ch.Notes
                });

            //_logger.Debug("Returning OK (200).");
            return Ok(results);
        }
        catch (Exception ex)
        {
            // _logger.Error("Returning Internal Server Error (500).", ex);
            return InternalServerError(ex);
        }
    }

The results are return to the page: //localhost:52317/api/members/67636/contact-history?order=asc

0: {id: 35167, contactedOn: "2015-04-17T18:40:00", method: "Home Phone", reason: "Confirmation",…}

[
  {
    "id": 35167,
    "contactedOn": "2015-04-17T18:40:00",
    "method": "Home Phone",
    "reason": "Confirmation",
    "direction": false,
    "outcome": "Left Voice Message",
    "notes": "Left VM."
  }
]

The page loads and all I see is a grey bar: localhost:52317/CallCenter/Campaigns/14/Solicit/67636

Why is does the page not load any data?

Answer 1

The table's headers I have as <td>. They should be <th>.