[Datatables] ajax 사용법

데이터 전송

Form Value 전송

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

 

JSON 전송

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "contentType": "application/json",
    "type": "POST",
    "data": function ( d ) {
      return JSON.stringify( d );
    }
  }
} );

 

Datatables에 Input Field 넣기

1. ajax dataSrc 사용

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "dataSrc": function ( json ) {
      $.each(json.data, function (idx, item) {
        item.input_field = '<input type="text" name="input_field" value="' + item.value + '">';
      });
      return json.data;
    }
  },
  columns: [
    {data: "input_field"}
  ]
} );

※ dataSrc : 서버에서 반환된 JSON 데이터를 변경하거나 조작할 수 있도록 제공되는 추가옵션

 

2. columns render 사용

$('#example').dataTable( {
  "ajax": {
    "url": "data.json"
  },
  columns: [
    {
      render: function (data, type, row) {
        return '<input type="text" name="input_field" value="' + row.value + '">';
      }
    }
  ]
} );

 

 

📖 참고자료

• [DataTables Reference] ajax