【jQuery】DataTablesでのエラー「Requested unknown parameter 'xxx' for row x, column x」の原因とは

概要

JavascriptのDataTablesを利用していたところ、updateフォーム送信時に以下のエラーが表示されました。

DataTables warning: table id=sample_table - Requested unknown parameter 'hogehoge' for row 0, column 5. For more information about this error, please see http://datatables.net/tn/4

原因は簡単でしたが...念の為備忘録として残します。

原因と該当コード

上記エラーの原因は、大体がデータソースと列設定を確認して該当パラメータが正しく設定されているかどうか、にあると思います。
私もその例に埋もれず、よく確認したら'hogehoge'という名前のプロパティが存在していなかったのです。

以下のようにすると成功しました。

$(document).ready(function () {
    var RenderTable = function (data) {
        var table = $('#sample_table').DataTable({
    ...
    // 省略

    var AddFeildToObject = function (index, value) {
        if (value['hogehoge_id'] == 1) {
            value.hogehoge = value['hoge_1']
        } else {
            value.hogehoge = value['other_hoge']
        }
    }


	var SaveFormEdit = function(){
		var form = $(this);
		$.ajax({
			url: form.attr('data-url'),
			data: form.serialize(),
			type: form.attr('method'),
			dataType: 'json',
			success: function(data){
				if(data.form_is_valid){
					$('#sample_table').DataTable().destroy();
                    var json = JSON.parse(data.queryset);
                    $.each(json, AddFeildToObject);　// これが漏れていた...
					RenderTable(json);
					$('#sample-edit').modal('hide');
				} else {
                    if(data.validation_failed) {
						$('#edit-error').val(data.validation_error);
					}else {
						$('#edit-error').val(data.error);
					}
				}
			}
		})
		return false;
	}

どうして上記エラーになったか、というと、$.each(json, AddFeildToObject);の記載が漏れていたためでした。この関数がない場合、hogehogeというパラメータが存在しないままRenderTable関数が実行されてしまうのです。

他の関数で初めて生成される変数がTablesにある場合は、しっかりそこを経由してあげる必要があります。

AddFeildToObject関数が省略されると、RenderTable関数がこれらの追加のプロパティを期待しているにもかかわらず、それらが存在しないためにエラーが発生するのです。

公式ドキュメント：

そのほか補足

上記コードは、非同期通信（AJAX）の成功時のコールバック関数です。
具体的には、とある登録情報を更新する際に送られるものです。

$('#sample_table').DataTable().destroy();では、IDがsample_tableの要素にバインドされたDataTableを破棄します。上記コードでは一番先頭に記載したものです。

var json = JSON.parse(data.queryset);では、サーバから返されたデータ（data.queryset）をJSON形式にパースします。私はDjangoでdata.querysetを渡してあげています。

$.each(json, AddFeildToObject);では、そのパースしたJSONデータの各要素に対してAddFeildToObject関数を実行します。

最後に、RenderTable(json);によって、パースしたJSONデータを引数にRenderTable関数を実行し、テーブルを再描画しています。

このような実装を行うことで、サーバからのレスポンスに基づいてUIを動的に更新することができます。