SmartTables.js

import { useEffect, useRef } from 'react';
import SmartTables from 'smarttables';

function DataTable({ data }) {
    const tableRef = useRef(null);

    useEffect(() => {
        if (tableRef.current) {
            const table = new SmartTables(tableRef.current, {
                data: {
                    type: 'json',
                    source: data,
                    columns: [
                        { data: 'id', title: 'ID' },
                        { data: 'name', title: 'Name' },
                        // ... other columns
                    ]
                }
            });

            // Cleanup on unmount
            return () => table.destroy();
        }
    }, [data]);

    return (
        <table ref={tableRef} className="table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    {/* ... other headers */}
                </tr>
            </thead>
            <tbody>
                {/* Data will be populated by SmartTables */}
            </tbody>
        </table>
    );
}

import { onMounted, onBeforeUnmount, ref } from 'vue';
import SmartTables from 'smarttables';

export default {
    setup() {
        const tableRef = ref(null);
        let table = null;

        onMounted(() => {
            if (tableRef.value) {
                table = new SmartTables(tableRef.value, {
                    data: {
                        type: 'json',
                        source: props.data,
                        columns: [
                            { data: 'id', title: 'ID' },
                            { data: 'name', title: 'Name' },
                            // ... other columns
                        ]
                    }
                });
            }
        });

        onBeforeUnmount(() => {
            if (table) table.destroy();
        });

        return {
            tableRef
        };
    }
}

import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import SmartTables from 'smarttables';

@Component({
    selector: 'app-data-table',
    template: `
    <table dataTable class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <!-- ... other headers -->
            </tr>
        </thead>
        <tbody>
            <!-- Data will be populated by SmartTables -->
        </tbody>
    </table>
    `
})
export class DataTableComponent implements OnInit, OnDestroy {
    @ViewChild('dataTable') tableRef: ElementRef;
    private table: any;

    ngOnInit() {
        if (this.tableRef.nativeElement) {
            this.table = new SmartTables(this.tableRef.nativeElement, {
                data: {
                    type: 'json',
                    source: this.data,
                    columns: [
                        { data: 'id', title: 'ID' },
                        { data: 'name', title: 'Name' },
                        // ... other columns
                    ]
                }
            });
        }
    }

    ngOnDestroy() {
        if (this.table) this.table.destroy();
    }
}

// Controller
public class DataController : ControllerBase
{
    [HttpGet("api/data")]
    public async Task GetData([FromQuery] DataTableRequest request)
    {
        var data = await _service.GetDataAsync();
        
        // Apply server-side processing
        var result = data
            .Skip(request.Start)
            .Take(request.Length)
            .ToList();

        return Ok(new {
            draw = request.Draw,
            recordsTotal = data.Count,
            recordsFiltered = data.Count,
            data = result
        });
    }
}

// JavaScript
const table = new SmartTables('myTable', {
    data: {
        type: 'ajax',
        source: '/api/data',
        serverSide: true,
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    }
});

// Controller
public function getData(Request $request)
{
    $query = User::query();
    
    // Handle search
    if ($request->has('search')) {
        $query->where('name', 'like', "%{$request->search}%");
    }
    
    // Handle sorting
    if ($request->has('order')) {
        $column = $request->input('order.0.column');
        $direction = $request->input('order.0.dir');
        $query->orderBy($columns[$column], $direction);
    }
    
    // Handle pagination
    $data = $query->skip($request->input('start'))
                  ->take($request->input('length'))
                  ->get();
    
    return response()->json([
        'draw' => $request->input('draw'),
        'recordsTotal' => User::count(),
        'recordsFiltered' => $query->count(),
        'data' => $data
    ]);
}

// JavaScript
const table = new SmartTables('myTable', {
    data: {
        type: 'ajax',
        source: '/api/data',
        serverSide: true,
        method: 'GET',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    }
});

# views.py
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods
from django.core.paginator import Paginator

@require_http_methods(["GET"])
def get_data(request):
    queryset = User.objects.all()
    
    // Handle search
    search = request.GET.get('search[value]')
    if search:
        queryset = queryset.filter(name__icontains=search)
    
    // Handle sorting
    order_column = request.GET.get('order[0][column]')
    order_dir = request.GET.get('order[0][dir]')
    if order_column and order_dir:
        queryset = queryset.order_by(f"{order_column} {order_dir}")
    
    // Handle pagination
    start = int(request.GET.get('start', 0))
    length = int(request.GET.get('length', 10))
    paginator = Paginator(queryset, length)
    page = (start // length) + 1
    
    return JsonResponse({
        'draw': int(request.GET.get('draw', 1)),
        'recordsTotal': User.objects.count(),
        'recordsFiltered': queryset.count(),
        'data': list(paginator.get_page(page))
    })

# JavaScript
const table = new SmartTables('myTable', {
    data: {
        type: 'ajax',
        source: '/api/data/',
        serverSide: true,
        method: 'GET',
        headers: {
            'X-CSRFToken': getCookie('csrftoken')
        }
    }
});

// Controller
const getData = async (req, res) => {
    try {
        const { start, length, search, order } = req.query;
        
        // Build query
        let query = User.find();
        
        // Handle search
        if (search) {
            query = query.find({
                $or: [
                    { name: { $regex: search, $options: 'i' } },
                    { email: { $regex: search, $options: 'i' } }
                ]
            });
        }
        
        // Handle sorting
        if (order) {
            const [column, direction] = order.split(':');
            query = query.sort({ [column]: direction === 'asc' ? 1 : -1 });
        }
        
        // Handle pagination
        const data = await query
            .skip(parseInt(start))
            .limit(parseInt(length))
            .exec();
            
        const total = await User.countDocuments();
        const filtered = await query.countDocuments();
        
        res.json({
            draw: parseInt(req.query.draw),
            recordsTotal: total,
            recordsFiltered: filtered,
            data
        });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
};

// JavaScript
const table = new SmartTables('myTable', {
    data: {
        type: 'ajax',
        source: '/api/data',
        serverSide: true,
        method: 'GET',
        headers: {
            'Authorization': 'Bearer ' + token
        }
    }
});