<dependency>
  <groupId>com.arrizaqu</groupId>
  <artifactId>simpledtable</artifactId>
  <version>0.0.1-SNAPSHOT</version>
</dependency>

@Component
public class ViewDatatable {
  @Autowired
  private ProjectDService projectDService;
  @Autowired
  private AppVersionRepository appVersionRepository;
  @Autowired
  private BranchRepo branchRepo;
  
  public DatatableResponse<?> projectPaginate(DatatableInfo requestDatatable) {
    Page<ProjectD> appPage = this.projectDService.findByNameContains(requestDatatable.getSearch(), UtilsSpringDt.getPageable(requestDatatable));
    return UtilsSpringDt.datatableFormat(appPage);
  }
  
  public DatatableResponse<?> versionPaginate(DatatableInfo requestDatatable) {
    Page<AppVersion> appPage = this.appVersionRepository.findByVersionContains(requestDatatable.getSearch(), UtilsSpringDt.getPageable(requestDatatable));
    return UtilsSpringDt.datatableFormat(appPage);
  }
  
  public DatatableResponse<?> branchPaginate(DatatableInfo requestDatatable){
	Page<Branch> appPage = this.branchRepo.findByBranchNameContains(requestDatatable.getSearch(), UtilsSpringDt.getPageable(requestDatatable));
	return UtilsSpringDt.datatableFormat(appPage);
  }
  
}

@Autowired
private ViewDatatable viewDatatable;

@RequestMapping(value="/findallpaginate", method=RequestMethod.POST)
@ResponseBody
public DatatableResponse<?> findAll(@ModelAttribute DatatableInfo requestDatatable){
  return this.viewDatatable.projectPaginate(requestDatatable);
}

<meta id="_csrf" name="_csrf" th:content="${_csrf.token}"/>
<meta id="_csrf_header" name="_csrf_header" th:content="${_csrf.headerName}"/>
................
...............

<div class="div-datatables">
<table dt-search="true" dt-url="/project/findallpaginate" id="table-project" class="display datatable-custome-theme" style="width:100%">
<thead>
    <tr>
	<th dt-field="name" >Name</th>
	<th dt-field="notes">Notes</th>
	<th dt-field="creator">Creator</th>
    </tr>
</thead>
<tbody></tbody>
</table>
</div>

//custome datatable
(function() {
 /* var run = function(myOptionSettings) {
    console.log(myOptionSettings)  
  };*/
  $(document).on('init.dt', function (e, settings, json) {
    //var myOption = settings.oInit.myOption
    //  run(myOption)
  })
})(document);


function datatableArr(table){
	//get ajax url
	var ajaxUrl = table.attr('dt-url');
	var tc = table.find('thead').find('tr');
	
	//get field column
	var columns = [];
	var loop = 0;
	$.each(tc.find('th'), function(x, y){
		columns[loop++] = {data : $(this).attr('dt-field')}
	});
	
	//get search enable
	var dtSearch = table.attr('dt-search');
	var isSearchEnable = false;
	if(dtSearch == "true"){
		isSearchEnable = true;
	}
	//render datatable
	table.DataTable({
		"processing": true,
		"serverSide": true,
		searching: isSearchEnable,
		ajax: {
			url : ajaxUrl,
			type: 'POST',
			beforeSend: function(){
				ajaxSetupCRSF();
			},
			data: function(d, settings){
				var oTable = $('#'+settings.sTableId).DataTable();
				var info = oTable.page.info();
				var selectedColumn = oTable;

				/*-------- paging number and showing current data ----------- */
				d.page = info.page; // get current page
				d.size = d.length; // show entries

				/*--------- Sorting Data ------------*/
				//get index selected order
				var idxColumn = oTable.order()[0][0];
				//get type selected order
				var idxType = oTable.order()[0][1];
				d.sort = d.columns[idxColumn].data+ ',' + idxType;

				/*--------- search data ------------------- */
				d.search = d.search.value;
				
				planify(d); 
			}
		},
		"columns": columns
	});	
}

function searchDatatable(){
	// #myInput is a <input type="text"> element
	$('#myInput').on( 'keyup', function () {
	    table.search( this.value ).draw();
	} );
}

function planify(data) {
    for (var i = 0; i < data.columns.length; i++) {
        column = data.columns[i];
        column.searchRegex = column.search.regex;
        column.searchValue = column.search.value;
        delete(column.search);
    }
}

$(function(){
	$.ajaxSetup({
		beforeSend: function(){
			setupAjaxDefault.prepare();
		},
		success: function(data){
			setupAjaxDefault.success();
		}, error : function(data){
			setupAjaxDefault.error();
		}
	});	
});

var setupAjaxDefault = {
	success : function(message){
		$.LoadingOverlay("hide");
		if(message != null){
			defaultNotification('success', message)
		} else {
			defaultNotification('success');
		}
	}, error : function(message){
		$.LoadingOverlay("hide");
		if(message != null){
			defaultNotification('error', message)
		} else {
			defaultNotification('error');
		}
	}, prepare : function(){
		ajaxSetupCRSF();
		$.LoadingOverlay("show");
	}, reset : function(form){
		$('#'+form).trigger("reset");
	}
}

function ajaxSetupCRSF(){
	var token = $("meta[name='_csrf']").attr("content");
	var header = $("meta[name='_csrf_header']").attr("content");

	$(document).ajaxSend(function(e, xhr, options) {
	    xhr.setRequestHeader(header, token);
	});
}

function defaultNotification(type, message){
	
	var successMessage = "Process has been successful"
	var errorMessage = "oops, there was an error in the process";
	var warningMessage = "this proses has warning!!";
	var infoMessage = "just information default";
	
	if(message != null){
		successMessage = message;
		errorMessage = message;	
		warningMessage = message;
		infoMessage = message;
	}
	
	if(type == "error"){
		toastr.error(errorMessage);	
	} else if(type == "warning"){
		toastr.warning(warningMessage);
	} else if(type == "info"){
		toastr.info(infoMessage)
	} else if(type == "success"){
		toastr.success(successMessage);
	}
}

//setup for jquery validation
$.validator.setDefaults({
	highlight: function(element) {
	    $(element).parent().addClass('has-error');
	  },
	unhighlight: function(element) {
	    $(element).parent().removeClass('has-error');
	}
});

$.extend(jQuery.validator.messages, {
    required: "This field is required.",
    remote: "Please fix this field.",
    email: "Please enter a valid email address.",
    url: "Please enter a valid URL.",
    date: "Please enter a valid date.",
    dateISO: "Please enter a valid date (ISO).",
    number: "Please enter a valid number.",
    digits: "Please enter only digits.",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
    minlength: jQuery.validator.format("Please enter at least {0} characters."),
    rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
    range: jQuery.validator.format("Please enter a value between {0} and {1}."),
    max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
    min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
});

public interface ProjectDRepository extends JpaRepository<ProjectD, String> {
  Page<ProjectD> findAll(Pageable paramPageable);
  
  Page<ProjectD> findByNameContains(String paramString, Pageable paramPageable);
}

$(document).ready(function(){
	
//datatable pagination
var projectTable = $("#table-project");
datatableArr(projectTable);

//form validation
$('#form-create-project').validate({
	rules: {
		projectname: "required",
		projectdescription: "required"
	},
	submitHandler: function(form){
		var datainput = {
			name : $('#projectname').val() ,
			notes : $('#projectdescription').val()
		}
		$.ajax({	
			type : 'POST',
			url : /*[[@{/project/save}]]*/ +"",
			contentType: 'application/json',
			data : JSON.stringify(datainput),
		}).done(function(settings){
			setupAjaxDefault.reset('form-create-project');
			projectTable.DataTable().draw();
		});	
	}
});

//event page
$("#dt-search").click(function(){
  xxTable.draw();
});

/*--------- search data ------------------- */
d.search = d.search.value;
d.multipleSearch = [$('#searchProgramCode').val(), $('#searchArea').val()];  

planify(d); 

public class DatatableInfo {
  private int draw;
  
  private int start;
  
  private int page;
  
  private String sort;
  
  private int size;
  
  private int length;
  
  private String search;
  private List<String> multipleSearch;
  private List<Map<String, Object>> order;
  
  private List<Map<String, Object>> columns;
  
  public int getDraw() {
    return this.draw;
  }
  
  public void setDraw(int draw) {
    this.draw = draw;
  }
  
  public int getStart() {
    return this.start;
  }
  
  public void setStart(int start) {
    this.start = start;
  }
  
  public int getPage() {
    return this.page;
  }
  
  public void setPage(int page) {
    this.page = page;
  }
  
  public String getSort() {
    return this.sort;
  }
  
  public void setSort(String sort) {
    this.sort = sort;
  }
  
  public int getSize() {
    return this.size;
  }
  
  public void setSize(int size) {
    this.size = size;
  }
  
  public int getLength() {
    return this.length;
  }
  
  public void setLength(int length) {
    this.length = length;
  }
  
  public String getSearch() {
    return this.search;
  }
  
  public void setSearch(String search) {
    this.search = search;
  }
  
  public List<Map<String, Object>> getOrder() {
    return this.order;
  }
  
  public void setOrder(List<Map<String, Object>> order) {
    this.order = order;
  }
  
  public List<Map<String, Object>> getColumns() {
    return this.columns;
  }
  
  public void setColumns(List<Map<String, Object>> columns) {
    this.columns = columns;
  }

  public List<String> getMultipleSearch() {
    return multipleSearch;
  }

  public void setMultipleSearch(List<String> multipleSearch) {
    this.multipleSearch = multipleSearch;
  }
}

Page<CompanyProgram> findAllByProgramCodeContainsIgnoreCaseAndAreaContainsIgnoreCase(String programCodeString, String area, Pageable pageable);