File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.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>
<link href="https://nightly.datatables.net/select/css/select.dataTables.css?_=766c9ac11eda67c01f759bab53b4774d.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/select/js/dataTables.select.js?_=766c9ac11eda67c01f759bab53b4774d"></script>
<link href="https://nightly.datatables.net/searchpanes/css/searchPanes.dataTables.css?_=1abb1d155e39f9bdd42ce7accaeb459d.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js?_=1abb1d155e39f9bdd42ce7accaeb459d"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <button id="load">Load Ajax</button>
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
​
        <tbody>
    
        </tbody>
      </table>
    </div>
  </body>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
$(document).ready(function() {
    var flip = 0;
​
    $.mockjax({
        url: '/test/0',
        responseTime: 250,
        response: function(settings) {
            if (flip === 0) {
                this.responseText = {
                    "data": [{
                            "name": "Tiger Nixon",
                            "position": "System Architect",
                            "salary": "$320,800",
                            "start_date": "2011\/04\/25",
                            "office": "Edinburgh",
                            "extn": "5421"
                        },
                        {
                            "name": "Garrett Winters",
                            "position": "Accountant",
                            "salary": "$170,750",
                            "start_date": "2011\/07\/25",
                            "office": "Tokyo",
                            "extn": "8422"
                        },
                        {
                            "name": "Ashton Cox",
                            "position": "Junior Technical Author",
                            "salary": "$86,000",
                            "start_date": "2009\/01\/12",
                            "office": "San Francisco",
                            "extn": "1562"
                        },
                        {
                            "name": "Cedric Kelly",
                            "position": "Senior Javascript Developer",
                            "salary": "$433,060",
                            "start_date": "2012\/03\/29",
                            "office": "Edinburgh",
                            "extn": "6224"
                        },
                        {
                            "name": "Airi Satou",
                            "position": "Accountant",
                            "salary": "$162,700",
                            "start_date": "2008\/11\/28",
                            "office": "Tokyo",
                            "extn": "5407"
                        },
                        {
                            "name": "Brielle Williamson",
                            "position": "Integration Specialist",
                            "salary": "$372,000",
                            "start_date": "2012\/12\/02",
                            "office": "New York",
                            "extn": "4804"
                        },
                        {
                            "name": "Herrod Chandler",
                            "position": "Sales Assistant",
                            "salary": "$137,500",
                            "start_date": "2012\/08\/06",
                            "office": "San Francisco",
                            "extn": "9608"
                        },
                        {
                            "name": "Rhona Davidson",
                            "position": "Integration Specialist",
                            "salary": "$327,900",
                            "start_date": "2010\/10\/14",
                            "office": "Tokyo",
                            "extn": "6200"
                        }
                    ]
                }
            } else if (flip === 1) {
                this.responseText = {
                    "data": [
​
                        {
                            "name": "Colleen Hurst",
                            "position": "Javascript Developer",
                            "salary": "$205,500",
                            "start_date": "2009\/09\/15",
                            "office": "San Francisco",
                            "extn": "2360"
                        },
                        {
                            "name": "Sonya Frost",
                            "position": "Software Engineer",
                            "salary": "$103,600",
                            "start_date": "2008\/12\/13",
                            "office": "Edinburgh",
                            "extn": "1667"
                        },
                        {
                            "name": "Jena Gaines",
                            "position": "Office Manager",
                            "salary": "$90,560",
                            "start_date": "2008\/12\/19",
                            "office": "London",
                            "extn": "3814"
                        },
                        {
                            "name": "Quinn Flynn",
                            "position": "Support Lead",
                            "salary": "$342,000",
                            "start_date": "2013\/03\/03",
                            "office": "Edinburgh",
                            "extn": "9497"
                        },
                        {
                            "name": "Charde Marshall",
                            "position": "Regional Director",
                            "salary": "$470,600",
                            "start_date": "2008\/10\/16",
                            "office": "San Francisco",
                            "extn": "6741"
                        },
                        {
                            "name": "Haley Kennedy",
                            "position": "Senior Marketing Designer",
                            "salary": "$313,500",
                            "start_date": "2012\/12\/18",
                            "office": "London",
                            "extn": "3597"
                        },
                        {
                            "name": "Tatyana Fitzpatrick",
                            "position": "Regional Director",
                            "salary": "$385,750",
                            "start_date": "2010\/03\/17",
                            "office": "London",
                            "extn": "1965"
                        },
                        {
                            "name": "Michael Silva",
                            "position": "Marketing Designer",
                            "salary": "$198,500",
                            "start_date": "2012\/11\/27",
                            "office": "London",
                            "extn": "1581"
                        }
                    ]
                }
​
            } else if (flip === 2) {
                this.responseText = {
                    "data": [{
                            "name": "Gloria Little",
                            "position": "Systems Administrator",
                            "salary": "$237,500",
                            "start_date": "2009\/04\/10",
                            "office": "New York",
                            "extn": "1721"
                        },
                        {
                            "name": "Bradley Greer",
                            "position": "Software Engineer",
                            "salary": "$132,000",
                            "start_date": "2012\/10\/13",
                            "office": "London",
                            "extn": "2558"
                        },
                        {
                            "name": "Dai Rios",
                            "position": "Personnel Lead",
                            "salary": "$217,500",
                            "start_date": "2012\/09\/26",
                            "office": "Edinburgh",
                            "extn": "2290"
                        },
                    ]
                }
​
            }
​
            flip = flip === 2? 0 : flip+1;
        }
    });
​
    var table = $('#example').DataTable({
        "ajax": {
            url: "/test/0",
            type: "POST"
        },
        dom: 'Pfrtip',
        "columns": [{
                "data": "name"
            },
            {
                "data": "position"
            },
            {
                "data": "office"
            },
            {
                "data": "extn"
            },
            {
                "data": "start_date"
            },
            {
                "data": "salary"
            }
        ]
    });
​
    $('#load').on('click', function() {
        table.ajax.reload();
    })
});
4 errors
Line 75: Missing semicolon.
Line 145: Missing semicolon.
Line 174: Missing semicolon.
Line 211: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers