YouTip

-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Create Drag and Drop Shopping Cart jEasyUI Create School Timetable jEasyUI Menu and Button jEasyUI Create Simple Menu jEasyUI Create Link Button jEasyUI Create Menu Button jEasyUI Create Split Button jEasyUI Layout jEasyUI Create Border Layout jEasyUI Create Complex Layout jEasyUI Create Accordion jEasyUI Create Tabs jEasyUI Dynamically Add Tabs jEasyUI Add Auto-play Tabs jEasyUI Create XP-style Left Panel jEasyUI DataGrid jEasyUI Convert HTML Table to DataGrid jEasyUI Get Selected Row Data jEasyUI Add Search Functionality jEasyUI Add Toolbar jEasyUI Create Complex Toolbar jEasyUI Set Frozen Columns jEasyUI Dynamically Change Columns jEasyUI Format Columns jEasyUI Set Sorting jEasyUI Custom Sorting jEasyUI Create Column Groups jEasyUI Add Checkbox jEasyUI Custom Pagination jEasyUI Enable Row Editing jEasyUI Extend Editors jEasyUI Column Calculation jEasyUI Merge Cells jEasyUI Create Custom View jEasyUI Create Footer Summary jEasyUI Conditionally Set Row Background Color jEasyUI Create PropertyGrid jEasyUI Expand Row to Show Details jEasyUI Create SubGrid jEasyUI Display Massive Data jEasyUI Add Pagination Component jEasyUI Window jEasyUI Create Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Create Dialog jEasyUI Custom Dialog jEasyUI Tree jEasyUI Create Tree Using Markup jEasyUI Create Async Tree jEasyUI Add Nodes to Tree jEasyUI Create Tree with Checkbox jEasyUI Tree Drag and Drop Control jEasyUI Tree Load Parent/Child Nodes jEasyUI Create Basic TreeGrid jEasyUI Create Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Add Pagination jEasyUI TreeGrid Lazy Load Nodes jEasyUI Form jEasyUI Create Async Submit Form jEasyUI Form Validation jEasyUI Create Tree ComboBox jEasyUI Format ComboBox jEasyUI Filter ComboBox DataGrid jEasyUI Reference jQuery EasyUI Plugin jQuery EasyUI Extension jQuery EasyUI DataGrid – Format Columns jQuery EasyUI DataGrid – Custom Sorting Explore Further Programming Languages Software Development Tools Computer Science Programming Web Services Web Service Scripting Languages Web Design and Development Scripts jQuery EasyUI DataGrid - Setting Sorting This example demonstrates how to sort the DataGrid by clicking on the column headers. All columns of the DataGrid can be sorted by clicking on the column headers. You can define which columns are sortable. By default, columns are not sortable unless you set the `sortable` attribute to `true`. Create DataGrid                                                                                                                                                            

Item ID	Product ID	List Price	Unit Cost	Attribute	Stauts

We define some sortable columns, including `itemid`, `productid`, `listprice`, `unitcost`, etc. The 'attr1' column and 'status' column are not sortable. When sorting, the DataGrid will send two parameters to the remote server: `sort`: The field name of the column to sort by. `order`: The sort order, which can be 'asc' or 'desc', default is 'asc'. Server-side Code     $page = isset($_POST['page']) ? intval($_POST['page']) : 1;     $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;     $sort = isset($_POST['sort']) ? strval($_POST['sort']) : 'itemid';     $order = isset($_POST['order']) ? strval($_POST['order']) : 'asc';     $offset = ($page-1)*$rows;          $result = array();          include 'conn.php';          $rs = mysql_query("select count(*) from item");     $row = mysql_fetch_row($rs);     $result = $row;          $rs = mysql_query("select * from item order by $sort $order limit $offset,$rows");          $items = array();     while($row = mysql_fetch_object($rs)){         array_push($items, $row);     }     $result = $items;          echo json_encode($result); Download jQuery EasyUI Example jeasyui-datagrid-datagrid8.zip jQuery EasyUI DataGrid – Format Columns jQuery EasyUI DataGrid – Custom Sorting ByteArk Coding Plan Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax. Official supply, stable and reliable. Configuration Guide ¥9.9 / month Activate Now iFlytek Xingchen Coding Plan Includes free model call quota. DeepSeek, GLM, Kimi, MiniMax. One-stop experience and deployment platform. Configuration Guide ¥3.9 / month Activate Now Click here to share notes Category Navigation Python / Data Science AI / Intelligent Development Front-end Development Back-end Development Database Mobile Development DevOps / Engineering Programming Languages Computer Basics XML / Web Service .NET Website Building Advertisement jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI Form CRUD Application jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Create Drag and Drop Shopping Cart jEasyUI Create School Timetable jEasyUI Menu and Button jEasyUI Create Simple Menu jEasyUI Create Link Button jEasyUI Create Menu Button jEasyUI Create Split Button jEasyUI Layout jEasyUI Create Border Layout jEasyUI Create Complex Layout jEasyUI Create Accordion jEasyUI Create Tabs jEasyUI Dynamically Add Tabs jEasyUI Add Auto-play Tabs jEasyUI Create XP-style Left Panel jEasyUI DataGrid jEasyUI Convert HTML Table to DataGrid jEasyUI Get Selected Row Data jEasyUI Add Search Functionality jEasyUI Add Toolbar jEasyUI Create Complex Toolbar jEasyUI Set Frozen Columns jEasyUI Dynamically Change Columns jEasyUI Format Columns jEasyUI Set Sorting jEasyUI Custom Sorting jEasyUI Create Column Groups jEasyUI Add Checkbox jEasyUI Custom Pagination jEasyUI Enable Row Editing jEasyUI Extend Editors jEasyUI Column Calculation jEasyUI Merge Cells jEasyUI Create Custom View jEasyUI Create Footer Summary jEasyUI Conditionally Set Row Background Color jEasyUI Create PropertyGrid jEasyUI Expand Row to Show Details jEasyUI Create SubGrid jEasyUI Display Massive Data jEasyUI Add Pagination Component jEasyUI Window jEasyUI Create Simple Window jEasyUI Custom Window Toolbar jEasyUI Window and Layout jEasyUI Create Dialog jEasyUI Custom Dialog jEasyUI Tree jEasyUI Create Tree Using Markup jEasyUI Create Async Tree jEasyUI Add Nodes to Tree jEasyUI Create Tree with Checkbox jEasyUI Tree Drag and Drop Control jEasyUI Tree Load Parent/Child Nodes jEasyUI Create Basic TreeGrid jEasyUI Create Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Add Pagination jEasyUI TreeGrid Lazy Load Nodes jEasyUI Form jEasyUI Create Async Submit Form jEasyUI Form Validation jEasyUI Create Tree ComboBox jEasyUI Format ComboBox jEasyUI Filter ComboBox DataGrid jEasyUI Reference jQuery EasyUI Plugin jQuery EasyUI Extension Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Sets & Tools · HTML Character Set Settings · HTML ASCII Character Set · JS Obfuscation/Encryption · PNG/JPEG Image Compression · HTML Color Picker · JSON Formatting Tool · Random Number Generator Latest Updates · Codex Advanced Configuration · AI Agent Terminology · ZCode Getting Started Tutorial · Loop Engineerin... · Claude Code Us... · Claude Code Us... · docker compose ... Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Mark Article Browsing History Clear All No records yet