El error más común desde que existe JQuery... no agregarlo.
Simplemente referencia lguna versión de JQuery en tu HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
La buena práctica recomendada es ponerlo en el body para que no bloquee la carga de los demás recursos.
function addRowDT(data) {
var tabla = $('#tbl_pacientes').DataTable();
for (var i = 0; i < data.length; i++) {
tabla.fnAddData([
data[i].IdPaciente,
data[i].Nombres,
(data[i].ApPaterno + " " + data[i].ApMaterno),
((data[i].Sexo == 'M')? "Masculino": "Femenino"),
data[i].Edad,
data[i].Direccion,
((data[i].Estado == true)? "Activo": "Inactivo")
]);
}
}
function sendDataAjax() {
$.ajax({
type: "POST",
url: "GestionarPaciente.aspx/ListarPacientes",
data: {},
contentType: 'application/json; charset=utf-8',
error: function (xhr, ajaxOptions, thrownError) {
console.log(xhr.status + " \n" + xhr.responseText, "\n" + thrownError);
},
success: function (data) {
addRowDT(data.d);
}
});
}
//Llamando a la funcion ajax al cargar el documento
sendDataAjax();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- TABLA DE PACIENTES-->
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Lista de Pacientes</h3>
</div>
<div class="box-body table-responsive">
<table id="tbl_pacientes" class="table table-bordered table-hover">
<thead>
<tr>
<th>Código</th>
<th>Nombres</th>
<th>Apellidos</th>
<th>Sexo</th>
<th>Edad</th>
<th>Dirección</th>
<th>Acciones</th>
</tr>
</thead>
<tbody id="tbl_body_table">
<!-- TABLE AJAX-->
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<script src="js/paciente.js" type="text/javascript"> </script>
</asp:Content>