Bootstrap Table - ajax init, not recommended approach

// Bootstrap table, custom ajax, load table in success. NOT recommended approach

HTML

<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table data-pagination="true" data-page-list="[5, 10, 20, 50, 100, 200]" data-search="true" data-height="300" id="table">
  <thead>
    <tr>
      <th data-field="state" data-checkbox="true"></th>
      <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
      <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
    </tr>
  </thead>
</table>

JavaScript

// Bootstrap table, custom ajax, load table in success. NOT recommended approach still, use data-url and responseHandler or ajax options in bootstrapTable if wanting this functionality, but fixed to help show user some of his mistakes
// Some notes: 
//	1. Always data-toggle OR $.bootstrapTable(), NEVER BOTH
//	2. Actually research and find working examples of the parts (not complete solution, but at least parts like $.ajax has so many fully working examples that your typos and mistakes would have been immmediately obvious if you following ANY simple tutorial)
//  3. Always debug, seeing if any errors in console, and research on how to find errors with ajax would point immediately to the 'error' option, which would have helped you as well
$(function() {
  $.ajax({
    url: "http://mikepenz.com/jsfiddle/",
    dataType: "json",
    success: function(result) {
      console.log('ajax.success', result);
      $('#table').bootstrapTable({
        data: result.rows
      });
    },
			error: function(msg) {
			  console.log('ajax.error',msg);
			}
  })
})