I can't use multi-column sort

suppertbw

I am not sure where is my wrong and the following is my code:

<script>
    $.ajax({
        url: "https://tasks.inlogik.com/devtest/animals",
        dataType: 'jsonp',
        data: '',
        jsonp: 'callback',
        success: function (arr) {
            var head = "<thead><th>"+"Name"+"</th><th>"+"Type"+"</th><th>"+"Weight"+"</th><th>"+"Birthday"+"</th><th>"+"Horns?"+"</th><th>"+"Action"+"</th></thead>";
            var body= "<tbody>";
            for (var i in arr) {
                body += "<tr><td>" +
                    arr[i].name +
                    "</td><td>" +
                    arr[i].type +
                    "</td><td>" +
                    arr[i].weight +
                    "</td><td>" +
                    arr[i].birthday+
                    "</td><td>" +
                    arr[i].hasHorns +
                    "</td><td>" +
                    "Details" +
                    "</td></tr>";
            }

            body += "</tbody>";
            var whole = head + body;

            document.getElementById("mytable").innerHTML = whole;
        },
        error: function (jqXHR, textStatus, ex) {
            alert(textStatus + "," + ex + "," + jqXHR.responseText);
        }
    });

    $(document).ready(function () {
        $('#mytable').dataTable({
            columnDefs: [{
                targets: [0],
                orderData: [0, 1]
            }, {
                targets: [1],
                orderData: [1, 0]
            }, {
                targets: [4],
                orderData: [4, 0]
            }]
        });
    });
</script>

And I've already add <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>