Busqueda personalisada con input resultado en DataTable

[emilio_viguri]

E buscado en otros preguntas similaras pero no logro implementar algo que me funcione, tengo problemas para mostrar la información filtrada en un POST y no se cual sea el error, estoy siguiendo las indicaciones de otras pagina, pero no e logrado echar andar por ello acudo a la comunidad, básicamente lo que requiero es mandar los valores de 3 input a la búsqueda y mostrarlos en el DataTable después de hacer clic en el botón buscar.

Si mi función la mando a llamar al inicio todo bien, claro que sin filtros, pero si la pongo en la $('#btnBuscar').click(function() para que me la muestra al dar clic no me muestra nada !

Aquí lo que estoy notando que tengo dos problemáticas por así decir no se mandar a llamar a la DataTable con clic y no se como pasar los parámetros de los input

ME PODRÍA AYUDAR CON ESTO !!!

este es mi HTML con los valores

Código HTML:

<form name="formBuscar" id="formBuscar" method="POST">
<input name="buscar" id="buscar" type="text" placeholder="# Control a buscar...">
<input name="fechainicio" id="fechainicio" type="date" placeholder="Fecha Inicial a buscar...">
<input name="fechafin" id="fechafin" type="date" placeholder="Fecha Final a buscar...">
<button type="submit" class="btn btn-block btn-outline-info" id="btnBuscar">Busca ya</button>
</form>
 

este es mi archivo JS donde si inicio la DataTable se muestra, pero si la quiero mostrar al dar clic inicia, no lo hace, no se por que y me faltaria mandar los 3 paramento input para trabajarlos en el PHP...

Código Javascript:

var DataTable; //Variable para dataTable.
 
//Funcion que se ejecuta al inicio
function iniciar(){
  // Aquí lista los registros sin problema pero solo al iniciar y sin implementar los input
  //listarRegistros();
}
 
$('#btnBuscar').click(function(){
  //Listar los registros pero al dar clic...
  listarRegistros();
});
 
 
function listarRegistros(){
 
 var formDatos = new FormData($("#formBuscar")[0]); //Para obtener los datos del FormID
 // Después mandarlos  con 
 // data: formDatos, //La variable var formData = new FormData mas arriba
 console.log(formDatos);
 
  DataTable = $('#DataTable').dataTable({
    "aProcessing": true, //Activa el procedimietno del DataTables
    "aServerSide": true, //Paginación y filtrado realizados por el servidor
    dom: 'Bfrtip', //Definimos los elementos del control de tabla
    buttons:['copyHtml5','excelHtml5','csvHtml5','pdf'],
    "ajax":{
      url: 'ajax/buscar.php?op=Buscar', //Obtener los valores desde url
      type: "get",
      dataType: "json", //Datos codificados mediante json
      error:function(e){ //en caso de errores
        console.log(e.responseText);
      }
    },
    "createdRow": function( row, data, dataIndex ) { //Establecer color a las filas
      //condiciones
      var varColn = 6;
      if(data[varColn] === '1'){
        $(row).css('background-color','rgba(0, 123, 255, .1)');
      }
      if(data[varColn] === '2'){
        $(row).css('background-color','rgba(255, 193, 7, .1)');
      }
      if(data[varColn] === '3'){
        $(row).css('background-color','rgba(40, 167, 69, .1)');
      }
      if(data[varColn] === '4'){
        $(row).css('background-color','rgba(220, 53, 69, .1)');
      }
      if(data[varColn] === '5'){
        $(row).css('background-color','rgba(108, 117, 125, .1)');
      }
    },
    "bBestroy": true,
    "iDisplayLength": 10, //Paginacion de X en X registros.
    "order": [[0, "desc"]] //Ordenar (columna,orden).
  }).DataTable();
}
 
//iniciar(); //Ejecuta iniciar, para que siempre se ejecute.
 

PHP que no e llegado a terminarlo por que no le e pasado las variables por que no e resuelto lo del DataTable pero creo yo que ya teniendo las variables en PHP ya estaré del otro lado ...

[HIGHLIGHT="PHP"]E buscado en otros preguntas similaras pero no logro implementar algo que me funcione, tengo problemas para mostrar la información filtrada en un POST y no se cual sea el error, estoy siguiendo las indicaciones de otras pagina, pero no e logrado echar andar por ello acudo a la comunidad, básicamente lo que requiero es mandar los valores de 3 input a la búsqueda y mostrarlos en el DataTable después de hacer clic en el botón buscar.

Si mi función la mando a llamar al inicio todo bien, claro que sin filtros, pero si la pongo en la $('#btnBuscar').click(function() para que me la muestra al dar clic no me muestra nada !

Aquí lo que estoy notando que tengo dos problemáticas por así decir no se mandar a llamar a la DataTable con clic y no se como pasar los parámetros de los input

ME PODRÍA AYUDAR CON ESTO !!!

este es mi HTML con los valores

Código HTML:

<form name="formBuscar" id="formBuscar" method="POST">
<input name="buscar" id="buscar" type="text" placeholder="# Control a buscar...">
<input name="fechainicio" id="fechainicio" type="date" placeholder="Fecha Inicial a buscar...">
<input name="fechafin" id="fechafin" type="date" placeholder="Fecha Final a buscar...">
<button type="submit" class="btn btn-block btn-outline-info" id="btnBuscar">Busca ya</button>
</form>
 

este es mi archivo JS donde si inicio la DataTable se muestra pero si la quiero mostrar al dar clic inicia, no lo hace, no se por que y me faltaria mandar los 3 paramento input para trabajarlos en el PHP...

Código Javascript:

var DataTable; //Variable para dataTable.
 
//Funcion que se ejecuta al inicio
function iniciar(){
  // Aquí lista los registros sin problema pero solo al iniciar y sin implementar los input
  //listarRegistros();
}
 
$('#btnBuscar').click(function(){
  //Listar los registros pero al dar clic...
  listarRegistros();
});
 
 
function listarRegistros(){
 
 var formDatos = new FormData($("#formBuscar")[0]); //Para obtener los datos del FormID
 // Después mandarlos  con 
 // data: formDatos, //La variable var formData = new FormData mas arriba
 console.log(formDatos);
 
  DataTable = $('#DataTable').dataTable({
    "aProcessing": true, //Activa el procedimietno del DataTables
    "aServerSide": true, //Paginación y filtrado realizados por el servidor
    dom: 'Bfrtip', //Definimos los elementos del control de tabla
    buttons:['copyHtml5','excelHtml5','csvHtml5','pdf'],
    "ajax":{
      url: 'ajax/buscar.php?op=Buscar', //Obtener los valores desde url
      type: "get",
      dataType: "json", //Datos codificados mediante json
      error:function(e){ //en caso de errores
        console.log(e.responseText);
      }
    },
    "createdRow": function( row, data, dataIndex ) { //Establecer color a las filas
      //condiciones
      var varColn = 6;
      if(data[varColn] === '1'){
        $(row).css('background-color','rgba(0, 123, 255, .1)');
      }
      if(data[varColn] === '2'){
        $(row).css('background-color','rgba(255, 193, 7, .1)');
      }
      if(data[varColn] === '3'){
        $(row).css('background-color','rgba(40, 167, 69, .1)');
      }
      if(data[varColn] === '4'){
        $(row).css('background-color','rgba(220, 53, 69, .1)');
      }
      if(data[varColn] === '5'){
        $(row).css('background-color','rgba(108, 117, 125, .1)');
      }
    },
    "bBestroy": true,
    "iDisplayLength": 10, //Paginacion de X en X registros.
    "order": [[0, "desc"]] //Ordenar (columna,orden).
  }).DataTable();
}
 
//iniciar(); //Ejecuta iniciar, para que siempre se ejecute.
 

PHP que no e llegado a terminarlo por que no le e pasado las variables por que no e resuelto lo del DataTable, pero creo yo que ya teniendo las variables en PHP ya estaré del otro lado ... con esto me regresa bien los datos para generar una DataTable

Código PHP:

while ($rowX = $row->fetch_object() ) {           
      $data[] = array(
          '0' => $rowX->val0,
          '1' => $rowX->val1,
          '2' => $rowX->val2,
          '3' => $rowX->val3,
          '4' => $rowX->val4,
          '5' => $rowX->val5,
          '6' => $rowX->val6,
      );
    }
        
    $row = array(
    "sEcho" => 1, #Información para el datatables.
    "iTotalRecords" =>count($data), #Envía el total de registros al datatable.
    "iTotalDisplayRecords"=> count($data), #Total de registros a visualizar.
    "aaData"=>$data # Envia el array con todos los registros.               
    );
    echo json_encode($row);