First poster here.
I’m using DataTables with server side processing and an AJAX call to load the table’s data based on a selected dimension. However, when the page first loads the table is not populated with data until I manually refresh.
I’ve checked the AJAX request, and it seems to work fine after the refresh, but it doesn’t trigger on the first page load.
Here’s what I’m doing:
- I initialize the table and set it to load data via AJAX.
- I’m using a dropdown (#dimensionDropdown) to select a dimension.
- The table data should load based on the selected dimension (defaulting to the top selection in the dropdown)
What I’ve Tried:
- The table loads fine after refreshing the page, but not initially.
- I’ve checked the network tab, and the AJAX request is made after the refresh.
Can anyone help me understand why the table is not loading on the first session and how I can fix this?
Here’s my Python route:
@app.route('/project/PROJECT_ID/tab/control/table/data', methods=['GET'])
def product_control_table_json(project_id):
print(f"Incoming AJAX request for JSON table — project_id: {project_id}")
projects = load_projects()
project = next((p for p in projects if p["id"] == "PROJECT_ID"), None)
if not project:
return jsonify({"data": []})
all_reports = load_all_reports()
product_reports = [r for r in all_reports if r['id'].startswith("PROJECT_ID") and r.get("report_type") == "product"]
if not product_reports:
return jsonify({"data": []})
latest_report = sorted(product_reports, key=lambda r: r["timestamp"], reverse=True)[0]
df = pd.DataFrame(latest_report["data"], columns=latest_report["columns"])
df = clean_dataframe(df)
if "Category Level 1" in df.columns and "Category Level 2" in df.columns:
df["Category_CONCAT"] = df["Category Level 1"] + " " + df["Category Level 2"]
selected_dimension = request.args.get("dimension", "Brand")
if selected_dimension not in df.columns:
return jsonify({"data": []})
search_value = request.args.get('search[value]', '')
if search_value:
df = df[df[selected_dimension].str.contains(search_value, case=False, na=False)]
grouped = df.groupby(selected_dimension, as_index=False).agg({
"Product ID": "count",
"Conversions": "sum"
})
order_column = int(request.args.get('order[0][column]', 0))
order_dir = request.args.get('order[0][dir]', 'asc')
grouped = grouped.sort_values(by=grouped.columns[order_column], ascending=(order_dir == 'asc'))
rows = []
for _, row in grouped.iterrows():
val = row[selected_dimension]
rows.append({
"dimension": val,
"count": row["Product ID"],
"conversions": row["Conversions"],
"checkbox_1": f'<input type="checkbox" name="specific_asset_group_values" value="{val}">',
"checkbox_2": f'<input type="checkbox" name="force_tier1_values" value="{val}">'
})
return jsonify({
"draw": request.args.get('draw', type=int, default=1),
"recordsTotal": len(df),
"recordsFiltered": len(grouped),
"data": rows
});
And here’s my Javascript:
$(document).ready(function() {
var table = $('#productTable').DataTable({
processing: true,
serverSide: true,
paging: false,
ajax: {
url: '/project/PROJECT_ID/tab/control/table/data',
data: function(d) {
d.dimension = $('#dimensionDropdown').val();
},
cache: false,
dataSrc: function(json) {
$('#rowCount').text(json.data.length);
return json.data;
}
},
columns: [
{ data: 'dimension' },
{ data: 'count' },
{ data: 'conversions' },
{ data: 'checkbox_1' },
{ data: 'checkbox_2' }
]
});
$('#dimensionDropdown').val('Brand');
table.ajax.reload();
$('#dimensionDropdown').on('change', function() {
table.ajax.reload();
});
});
