Fala pessoal, tenho uma aplicação WEB em Node.JS onde ao entrar na rota de cadastro de ocorrências passo ao render da página um array que é uma consulta a uma tabela de cadastro de material que tem mais de 10.000 registros, este array eu uso para popular um combobox SELECT2, está tudo ok, porém meu problema é que como possui muitos registros, a página demora para carregar, o mesmoa contece quando clico no SELECT2, demora para processar, tem alguma forma diferente de eu popular o SELECT2, tipo usando paginação, não sei, por favor, podem me ajudar?
Inicialização do elemento Select2:
<!-- Inicialização do elemento Select2 -->
<script>
$(function () {
$('.select2').select2({
theme: "bootstrap4",
});
});
</script>
Consulta:
//Consulta
async doQuery(queryToDo) {
let pro = new Promise((resolve, reject) => {
let query = queryToDo;
//Executando a consulta
this.db.query(query, function(err, result) {
if (err) throw err;
resolve(result);
});
})
//Retornando o resultado
return pro.then((val) => {
return val;
})
}
//Materiais
async getMateriais() {
let query = "SELECT * FROM tb_cadastro_material ORDER BY material ASC";
return this.doQuery(query)
}
Rota que faz a consulta e envia para a página:
let materiais = await DBModel.getMateriais();
//Passa o conteúdo das variáveis para a página principal
res.render('./pageAdmin', {
//Populando elementos
DTMaterial: materiais,
.
.
.
E enfim o meu SELECT2 sendo populado no front end:
<option value="">-- Selecione --</option>
<% DTMaterial.forEach((row, index) => { %>
<option value="<%= row.material %>"><%= row.material %></option>
<% }) %>
Há uma outra forma de popular considerando que a origem dos dados possui milhares de registros, e sim, é necessário todos pois o usuário poderá selecionar qualquer um da lista.
