javascript - HTML Table SBadmin Bootstrap From JSON -


i trying build table json not loading data . want pagination in table . tried followed format sb admin bootstrap fails load data .

my html code :--

<div class="datatable_wrapper">  <table class="table table-striped table-bordered table-hover" id="agents">   <thead>     <tr>      <th> employeenumber</th>      <th> fullname</th>      <th>employeeemail</th>      <th>jobtitle</th>      <th>deptno</th>      <th>deptname</th>      <th>manageremail</th>      <th>managerid</th>      <th>managername</th>      <th>assignmentlastmodifiedby</th>      <th>assignmentlastmodifieddate</th>      <th>country</th>      <th>theatre</th>      <th>paymentanalyst</th>      <th>commdatefrom</th>     </tr>    </thead>   </table> </div> 

my script :--

<script>   $(document).ready(function() {   $('#agents').datatable( {   "ajax": 'http://localhost:8080/testquartz/json/agent.json'     } );     } ); </script>   

my json file :--

{"agent":[ {"country":"aus","employeenumber":"397142","assignmentlastmodifiedby":null,"assignmentlastmodifieddate":null,"paymentanalyst":"khoo, t","fullname":"abc","theatre":"asia","managerid":"249058","commdatefrom":"2015-06-15 00:00:00.0","deptname":"global virtual sales - ","managername":"turner, j","jobtitle":"virtual sales account ","manageremail":"ert","deptno":"115331063","employeeemail":"bre"}, {"country":"deu","employeenumber":"196091","assignmentlastmodifiedby":null,"assignmentlastmodifieddate":null,"paymentanalyst":"hatlak, t","fullname":"gros, s","theatre":"euro","managerid":"52367","commdatefrom":"2006-11-01 00:00:00.0","deptname":"global virtual sales - germany hq","managername":"mer, w","jobtitle":"territory business manager.iii.sales.xyz","manageremail":"wme","deptno":"515031281","employeeemail":"sim"}, {"country":"fin","employeenumber":"598401","assignmentlastmodifiedby":null,"assignmentlastmodifieddate":null,"paymentanalyst":"hatlak, t","fullname":"kur, es","theatre":"euro","managerid":"144218","commdatefrom":"2011-10-01 00:00:00.0","deptname":"eu ss geo finland other","managername":"lunt, tha","jobtitle":"client services manager.ii.service sales.xyz","manageremail":"tlu","deptno":"561038082","employeeemail":"eku"}, {"country":"usa","employeenumber":"399411","assignmentlastmodifiedby":null,"assignmentlastmodifieddate":null,"paymentanalyst":"spaulding, s,"fullname":"hen, cr jo","theatre":"us","managerid":"153592","commdatefrom":"2015-06-22 00:00:00.0","deptname":"michigan select","managername":"wil, sc a","jobtitle":"systems engineer-c.ii.sales.xyz","manageremail":"sco","deptno":"020230434","employeeemail":"cra"} ]} 

can me ?

regards.

your data pulled agent object instead of data object, need datasrc. also, instead of getting data arrays, getting data objects, need use columns data option.

<script> $(document).ready(function() {   $('#agents').datatable( {      "ajax": 'http://localhost:8080/testquartz/json/agent.json',      "datasrc": "agent",      "columns": [          { "data" : "employeenumber"},          { "data" : "fullname" },          ....          { "data" : "commdatefrom" }      ]   } ); } ); </script> 

as far styling goes, remember use datatables bootstrap integration files. css replacement standard datatables css - don't need both.


Comments