Fuelux - How to populate repeater data using datasource

Question

I am trying to use fuelux repeater for one of my projects but I kind of struggle on populating data into the table. I used the basic repeater template given on the docs but couldnt understand their example properly since its using a lot of other plugins like require.js and underscore.js. Can anyone please help me understand how to do this. Essentially I want use php and js to import data into the repeater.

I have a jsfiddle setup here with my current progress.

<div class="fuelux">
    <div class="repeater" id="myRepeater">
    <div class="repeater-header">
      <div class="repeater-header-left">
        <span class="repeater-title">Awesome Repeater</span>
        <div class="repeater-search">
          <div class="search input-group">
            <input type="search" class="form-control" placeholder="Search"/>
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
                <span class="sr-only">Search</span>
              </button>
            </span>
          </div>
        </div>
      </div>
      <div class="repeater-header-right">
        <div class="btn-group selectlist repeater-filters" data-resize="auto">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="selected-label">&nbsp;</span>
            <span class="caret"></span>
            <span class="sr-only">Toggle Filters</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li data-value="all" data-selected="true"><a href="#">all</a></li>
            <li data-value="some"><a href="#">some</a></li>
            <li data-value="others"><a href="#">others</a></li>
          </ul>
          <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
        </div>
        <div class="btn-group repeater-views" data-toggle="buttons">
          <label class="btn btn-default active">
            <input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
          </label>
          <label class="btn btn-default">
            <input name="repeaterViews" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
          </label>
        </div>
      </div>
    </div>
    <div class="repeater-viewport">
      <div class="repeater-canvas"></div>
      <div class="loader repeater-loader"></div>
    </div>
    <div class="repeater-footer">
      <div class="repeater-footer-left">
        <div class="repeater-itemization">
          <span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
          <div class="btn-group selectlist" data-resize="auto">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              <span class="selected-label">&nbsp;</span>
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
              <li data-value="5"><a href="#">5</a></li>
              <li data-value="10" data-selected="true"><a href="#">10</a></li>
              <li data-value="20"><a href="#">20</a></li>
              <li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
              <li data-value="100"><a href="#">100</a></li>
            </ul>
            <input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
          </div>
          <span>Per Page</span>
        </div>
      </div>
      <div class="repeater-footer-right">
        <div class="repeater-pagination">
          <button type="button" class="btn btn-default btn-sm repeater-prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
            <span class="sr-only">Previous Page</span>
          </button>
          <label class="page-label" id="myPageLabel">Page</label>
          <div class="repeater-primaryPaging active">
            <div class="input-group input-append dropdown combobox">
              <input type="text" class="form-control" aria-labelledby="myPageLabel">
              <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                  <span class="caret"></span>
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-right"></ul>
              </div>
            </div>
          </div>
          <input type="text" class="form-control repeater-secondaryPaging" aria-labelledby="myPageLabel">
          <span>of <span class="repeater-pages"></span></span>
          <button type="button" class="btn btn-default btn-sm repeater-next">
            <span class="glyphicon glyphicon-chevron-right"></span>
            <span class="sr-only">Next Page</span>
          </button>
        </div>
      </div>
    </div>
  </div>

</div>

Answer 1

The Fuel UX Repeater uses a JSON-based datasource. This means you will probably use AJAX to load a JSON file and then format that data and pass it to the datasource callback. You will need to set up the connection between the columns and the key/value pairs in the JSON array.

Here is how the repeater in the docs is set up. That JS and the HTML you have should be all you need. You do not need AMD/require.js for Fuel UX to work. Here is an example of the use of script tags only if you download Fuel UX into a vendor folder.