Как построить datatable, используя jQuery из ответа REST xml?

Question

У меня есть XML-ответ от вызова Ajax REST.Аналогично приведенному ниже.

    <eventBlock>
        <event eventId="641">
            <processId>myprocess</processId>
            <batchId>15581</batchId>
            <user>Ajay</user>
            <participant>XYZ</participant>
            <activity>Jogging</activity>
            <note>Athletic</note>
            <createdOn>2011-11-22 00:00:00.0</createdOn>
            <createdBy>User5</createdBy>
        </event>
    </eventBlock>

Мой HTML:

    <form class="searchform" id="searchform" action="javascript: submitForm();">
     .....
    </form>
    <div id="UI">
        <table id="events" class="display">
                <thead>
                        <tr>
                            <th>eventId</th>
                            <th>processId</th>
                            <th>batchId</th>
                            <th>user</th>
                            <th>participant</th>
                            <th>activity</th>
                            <th>note</th>
                            <th>createdOn</th>
                            <th>createdBy</th>
                        </tr>
                </thead>
                <tbody>
                </tbody>
        </table>
    </div>

Javascript:

<script type="text/javascript">
var thisTable;
thisTable = $("#events").dataTable(
    {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true
    }
);
        function addToTable(response){
            var $events = $(response).find("event");

            $events.each(function(index, event){
                var $event = $(event),
                    addData = [];

                addData.push($event.attr("eventId"));
                addData.push($event.children("processId").text());
                addData.push($event.children("batchId").text());
                addData.push($event.children("user").text());
                addData.push($event.children("participant").text());
                addData.push($event.children("activity").text());
                addData.push($event.children("note").text());
                addData.push($event.children("createdOn").text());
                addData.push($event.children("createdBy").text());

                thisTable.fnAddData(addData);
            });
        }

        function submitForm() {
            $.ajax({
                url:'../../data.xml',
                data:{
                    batchId:1234,
                    processId:afsfafgg  
                },
                type:"GET",
                success:addToTable
            });
            return false;
        }
</script>

Когда я нажимаю кнопку подтверждения.Я получаю ниже ошибку на firebug.Может ли кто-нибудь помочь мне решить эту проблему?

oНастройки недействительны [Прервать эту ошибку] ​​
var iRow = oSettings.aoData.length;

Заранее спасибо!

Answer 1

XML-ответ обрабатывается так же, как и любой другой тип данных.Пока вы указываете, какого типа он должен ожидать.

Этот вопрос показывает, как анализировать XML в JQuery.XML обрабатывается как любой другой элемент.

Вот пример.

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            $event.children().each(function(i, child){
                addData.push($(child).text());
            });

            dataTable.fnAddData(addData);
        });
    }
});

Если вы не хотите проходить по всем дочерним элементам в каждом событии, выможно просто назначить их вручную

$.ajax({
    url:"xml.xml",
    dataType: "xml",
    type:"POST",
    success: function(response){
        var $events = $(response).find("event");

        $events.each(function(index, event){
            var $event = $(event),
            addData = [];

            addData.push($event.children("processId").text());
            addData.push($event.children("batchId").text());
            addData.push($event.children("user").text());
            addData.push($event.children("participant").text());
            addData.push($event.children("activity").text());
            addData.push($event.children("note").text());
            addData.push($event.children("createdOn").text());
            addData.push($event.children("createdBy").text();

            dataTable.fnAddData(addData);
        });
    }
});

Убедитесь, что массив, отправляемый в fnAddData, содержит столько же элементов, сколько заголовки таблицы.

Редактировать

После проверки HTMLи Javascript, я не могу воспроизвести проблему.

Проверьте этот тестовый пример

Я собираюсь угадать и сказать, что есть еще код, который выне включает, это влияет на результат.

Я, вероятно, должен отметить, что встроенные функции javascript обычно не одобряются в кругах webdev.Вместо этого вы должны попытаться отделить ваш код JavaScript от HTML-кода, как в последнем примере.

Используйте $("#form").submit(function{...}); вместо встраивания функции в ваш HTML.

Читайте ранняя регистрация обработчика событий против традиционная модель регистрации событий

Answer 2

REST, скорее всего, является междоменным, и в этом случае вам потребуется создать прокси на вашем сервере для получения XML. Прокси становится вашим URL AJAX.

Если ваша цель - создать таблицу «только для чтения», вы можете просто напечатать xml в качестве вывода в запрос ajax и самостоятельно проанализировать вывод таблицы в обратном вызове ajax sucecss перед вызовом таблиц данных.

Если вам нужна возможность редактирования и вы хотите, чтобы источник данных передавался непосредственно в плагин datatables, вам нужно проанализировать серверную часть xml в json.

То, как вы справитесь с этим, зависит от ваших потребностей. Прокси относительно легко настроить в любом случае.

Если REST обслуживает JSONP, может обойти прокси

EDIT. Другой подход - использовать такой сервис, как Yahoo YQL, в качестве прокси. Можно настроить это в считанные минуты