我有一个使用ajax的数据表。我想要无限滚动分页。我唯一能弄清楚该怎么做的方法是启用serverSide处理/分页。现在出现了一个问题，因为我要在浏览器端进行搜索和排序。那么如何在浏览器端无限滚动（否serverSide）？
注意：引导程序和jquery也已加载。
$(() => {
let user_level = 0
getObject('user_data').then(user => {
user_level = user.user_level
})
let adjusted = false
getItem('access_token').then(storage => {
let access_token = storage.value
inventory_table = $('#inventory_table').DataTable({
serverSide: true,
ajax: (data, callback, settings) => {
let payload = {
start: data.start,
len: data.length,
end: data.start + data.length
}
$.ajax( "https://myapi/list_inventory", {
type: 'POST',
data: JSON.stringify(payload),
contentType: 'application/json',
dataType: 'json',
beforeSend: function (xhr) { //Include the bearer token in header
xhr.setRequestHeader("Authorization", `Bearer ${access_token}`);
}
}).done(resp => {
callback({
draw: data.draw,
data: resp,
/*recordsTotal: 300,
recordsFiltered: 300*/
})
inventory_table.responsive.recalc()
inventory_table.fixedHeader.adjust()
if(!adjusted){
inventory_table.columns.adjust().draw()
adjusted = true
}
}).fail(resp => {
console.log('err', resp.responseJSON)
})
},
rowReorder: {
selector: 'td:nth-child(2)'
},
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columns: [
{
name: 'photo',
title: '',
data: 'photo',
defaultContent: '',
className: "text-center",
'render': data => {
return `<img src="https://myapi/${data}" height="70" />`;
}
},
{
name: 'item_name',
title: 'Item',
data: 'item_name',
className: "text-left"
},
{
name: 'quant',
title: 'Qty',
data: 'quant',
className: "text-center",
render: (quant, type, row, meta) => {
let this_id = `quant_${meta.row}`
if(user_level >= 8){
$(`#${this_id}`).editable('https://myapi/do_edit_quant', {
type : "number",
select : true,
width : 30,
onblur: 'submit',
method: 'POST',
name: 'quant',
submitdata: {
item_id: row['id']
},
ajaxoptions: {
beforeSend: function (xhr) { //Include the bearer token in header
xhr.setRequestHeader("Authorization", `Bearer ${access_token}`);
}
},
intercept: (res) => {
res = JSON.parse(res)
return res.new_quant
}
})
}
let color = 'black'
let font_weight = 'normal'
if(quant <= row.alert_thresh){
color = 'red'
font_weight = 'bold'
}
return `<span id="${this_id}" style="color: ${color}; font-weight: ${font_weight}">${quant}</span>`
}
},
{
name: 'alert_thresh',
title: 'Min',
data: 'alert_thresh',
className: "text-center",
render: (alert_thresh, type, row, meta) => {
let this_id = `alert_thresh_${meta.row}`
$(`#${this_id}`).editable('https://myapi/do_edit_thresh', {
type : "number",
select : true,
width : 30,
onblur: 'submit',
method: 'POST',
name: 'alert_thresh',
submitdata: {
item_id: row['id']
},
ajaxoptions: {
beforeSend: (xhr) => { //Include the bearer token in header
xhr.setRequestHeader("Authorization", `Bearer ${access_token}`)
}
},
intercept: (res) => {
res = JSON.parse(res)
return res.alert_thresh
}
})
return `<span id="${this_id}">${alert_thresh}</span>`
}
},
{
name: 'location',
title: 'Loc',
data: 'section',
className: "text-center",
render: (section, type, row, meta) => {
return `${section} - ${row.location}`
}
},
{
name: 'distributor',
title: "Distributor",
data: 'dist_name',
className: "text-center",
defaultContent: 'None',
render: (distributor, type, row, meta) => {
return `${distributor}`
}
},
{
name: 'last_user',
title: 'Last User',
data: 'last_user_id',
className: "text-center",
defaultContent: 'None',
render: (last_id, type, row, meta) => {
return last_id !== undefined && last_id !== null ? `${row.first_name} ${row.last_initial}.` : 'None'
}
},
{
name: 'updated',
title: "Updated",
data: 'last_update_date',
className: "text-center",
defaultContent: 'None'
},
{
name: 'actions',
title: '',
className: "text-center",
render: (data, type, row, meta) => {
let output = ''
output += `<a class="btn btn-warning check_btn" onclick="deduct_qty(${row.id})" href="#">
<i class="fa fa-minus fa-lg"> 1</i>
</a>
<a class="btn btn-success" href="new_order.html?item_id=${row.id}">
<i class="fa fa-plus fa-lg"> Order More</i>
</a>
`
return output
}
}
],
asStripeClasses: [],
scrollY: '100vh',
deferRender: true,
scrollCollapse: false,
scroller: {
loadingIndicator: true
},
language: {
search: "",
searchPlaceholder: "Search"
},
initComplete: () => {
$('.dataTables_filter input').addClass('form-control form-control-lg')
},
info: false
})
})
})