About server-side DataTable regex search problems
About server-side DataTable regex search problems
Woon
Posts: 4Questions: 1Answers: 0
I'm trying to global search in a serverSide DataTable (my data row number = about 740,000rows) using regex search.
-> ex) https://datatables.net/examples/api/regex.html
I already tried codes in above examples. However, my global search example works just like search in datatable not above example. So I tried client side (row number = 1000 rows). It did a global search successfully.
Is there any other way of global search as a serverSide DataTable?
My Code----------
{% extends "db/base.html" %}
{% block content %}
<div class="row">
<div class="container-fluid">
<div class="jumbotron">
<p> Version - MGA version 1.1 </p>
<p> Treat as regex : </p>
<p> Use smart search : </p>
<table cellspacing="0" width="40%" class="table table-striped">
<thead>
<tr>
<th> Target column </th>
<th> Search keyword </th>
<th> Treat as regex </th>
<th> Use smart search </th>
</tr>
</thead>
<tbody>
<tr id="filter_global">
<td>Global search</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
</tr>
</tbody>
</table>
<table id = "MGAv1_table" class="table table-striped table-sm table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Number</th>
<th>ChipName</th>
<th>Chr</th>
<th>Position</th>
<th>rsID</th>
<th>Ref</th>
<th>Alt</th>
<th>Gene</th>
<th>Biotype</th>
<th>Variant</th>
<th>BaseChange</th>
<th>AminoAcidChange</th>
<th>Disease</th>
<th>CLN_PMID</th>
<th>X1KG_AFR</th>
<th>X1KG_AMR</th>
<th>X1KG_EAS</th>
<th>X1KG_EUR</th>
<th>X1KG_SAS</th>
<th>gnomAD_AFR</th>
<th>gnomAD_AMR</th>
<th>gnomAD_EAS</th>
<th>gnomAD_EUR</th>
<th>KRGDB</th>
<th>GT</th>
<th>GT_count</th>
<th>GT_percentage</th>
<th>AL</th>
<th>MA</th>
<th>ALT_AF</th>
<th>NoCall</th>
<th>Diff</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
{% endblock content %}
{% block js %}
<script>
//global search//
function filterGlobal() {
$('#MGAv1_table').DataTable().search(
$('#global_filter').val(),
$('#global_regex').prop('checked'),
$('#global_smart').prop('checked')
).draw();
}
//global search//
//DataTable//
$(document).ready(function() {
$('#MGAv1_table').DataTable({
"serverSide":true,
"processing":true,
"search":{
"regex":true
},
"scrollX": '500vh',
"scrollY": '100vh',
"scrollCollapse":true,
"lengthMenu": [[10, 25, 50, 75], [10, 25, 50, 75]],
"ajax": {
"url": "/api/VARIANTINFO/",
"type": "GET"
},
"select": {
'style': 'multi'
},
"order": [[1, 'asc']],
"columns" : [
{"data": "id"},
{"data": "ChipName"},
{"data": "Chr"},
{"data": "Position"},
{"data": "rsID"},
{"data": "Ref"},
{"data": "Alt"},
{"data": "Gene"},
{"data": "Biotype"},
{"data": "Variant"},
{"data": "BaseChange"},
{"data": "AminoAcidChange"},
{"data": "Disease"},
{"data": "CLN_PMID"},
{"data": "X1KG_AFR"},
{"data": "X1KG_AMR"},
{"data": "X1KG_EAS"},
{"data": "X1KG_EUR"},
{"data": "X1KG_SAS"},
{"data": "gnomAD_AFR"},
{"data": "gnomAD_AMR"},
{"data": "gnomAD_EAS"},
{"data": "gnomAD_EUR"},
{"data": "KRGDB"},
{"data": "GT"},
{"data": "GT_count"},
{"data": "GT_percentage"},
{"data": "AL"},
{"data": "MA"},
{"data": "ALT_AF"},
{"data": "NoCall"},
{"data": "Diff"},
],
"dom": 'Blfrtip',
"buttons": [
{ "extend": 'collection',
"text": 'Export',
"buttons":[
{
"extend": 'copy',
"exportOptions":{
"modifier":{
"page": 'all',
"search": 'none'
},
}
}
]
}
]
});
$('#submitForm').on('submit', function(e){
var form=this;
var rows_selected = table.column(0).checkboxes.selected();
$.each(rows_selected, function(index, rowId){
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'id[]')
.val(rowId)
);
});
$('#console-rows-number').text(rows_selected.join(","));
$('#console-form').text($(form).serialize());
$('input[name="id\[\]"]', form).remove();
e.preventDefault();
});
$('input.global_filter').on( 'keyup click', function() {
filterGlobal();
});
});
</script>
{% endblock js %}
This discussion has been closed.